Title: Jupa – Blocknimations
Author: Jupa
Published: <strong>19. september, 2026</strong>
Last modified: 23. september, 2026

---

Søk i utvidelser

![](https://ps.w.org/jupa-blocknimations/assets/icon-256x256.gif?rev=3703368)

# Jupa – Blocknimations

 Av [Jupa](https://profiles.wordpress.org/jupa8/)

[Last ned](https://downloads.wordpress.org/plugin/jupa-blocknimations.1.1.0.zip)

 * [Detaljer](https://nb.wordpress.org/plugins/jupa-blocknimations/#description)
 * [Omtaler](https://nb.wordpress.org/plugins/jupa-blocknimations/#reviews)
 *  [Installering](https://nb.wordpress.org/plugins/jupa-blocknimations/#installation)
 * [Utvikling](https://nb.wordpress.org/plugins/jupa-blocknimations/#developers)

 [Brukerstøtte](https://wordpress.org/support/plugin/jupa-blocknimations/)

## Beskrivelse

Jupa Blocknimations adds animation controls directly to the blocks you already use(
paragraph, image, columns, group, and more) — no new block, no extra markup. Pick
from a curated shortlist or the full Animate.css catalog (97 animations, plus 4 
custom «Reveal» wipes).

 * **On Enter** (default): plays once the first time a block scrolls into view, 
   staggering blocks that enter together. Works in every browser.
 * **Scroll driven**: ties the animation to scroll position via native CSS (`animation-
   timeline`), falling back to «On Enter» automatically where unsupported.
 * **Respects reduced motion**: with the OS «reduce motion» setting, animated blocks
   render in their final state — no movement.
 * **Loads only where needed**: pages without an animated block skip the animation
   CSS and script entirely.

No animation JS library is bundled — just a small IntersectionObserver (under 1KB)
plus plain CSS. Animations are real Animate.css classes and CSS custom properties,
so they’re easy to override from your own CSS (e.g. `--animate-duration`, `--animate-
distance`, or any property with `!important`).

**A note on restraint:** animation is a great touch, but overusing it or mixing 
too many effects tends to hurt more than it helps. That’s why the toolbar leads 
with a short, curated shortlist — the full catalog is one click away via «More Animations…»
when you actually need it.

#### How to Use

 1. Select a supported block (paragraph, heading, image, gallery, group, columns, button,
    cover, video, and more).
 2. Three icons appear in its toolbar:
 3.  * **Animation**: the curated shortlist, or **More Animations…** for the full catalog.
     * **Delay**: a fixed 200ms–3000ms delay, or leave on «None» for automatic staggering.
     * **Type**: click to switch between **On Enter** and **Scroll driven** (hides 
       Delay, which has no effect there).
 4. Preview on the front end — animations only run there, never in the editor.

#### Source Code

Full source, including build tools, is at https://github.com/jupa8712/jupa-blocknimations.
The `build/` folder is compiled from `src/` via `@wordpress/scripts` — run `npm 
install` then `npm run build` to regenerate it.

#### Credits

«Scroll down» icon (https://www.magnific.com/animated-icon/scroll-down_17905763)—
Designed by Magnific (https://www.magnific.com).

## Skjermbilder

[⌊Curated animation shortlist, plus custom reveals and the full catalog one click
away.⌉⌊Curated animation shortlist, plus custom reveals and the full catalog one
click away.⌉[

Curated animation shortlist, plus custom reveals and the full catalog one click 
away.

[⌊Fixed delay options, or leave it on auto-stagger.⌉⌊Fixed delay options, or leave
it on auto-stagger.⌉[

Fixed delay options, or leave it on auto-stagger.

[⌊The Advance modal: full animation catalog and animation type in one place.⌉⌊The
Advance modal: full animation catalog and animation type in one place.⌉[

The Advance modal: full animation catalog and animation type in one place.

[⌊The mouse icon marks a block set to Scroll driven.⌉⌊The mouse icon marks a block
set to Scroll driven.⌉[

The mouse icon marks a block set to Scroll driven.

[⌊Full Animate.css catalog, grouped by category.⌉⌊Full Animate.css catalog, grouped
by category.⌉[

Full Animate.css catalog, grouped by category.

[⌊One click toggles between animation types.⌉⌊One click toggles between animation
types.⌉[

One click toggles between animation types.

## Installasjon

 1. Upload the plugin files to the `/wp-content/plugins/jupa-blocknimations` directory,
    or install through the WordPress plugins screen.
 2. Activate through the «Plugins» screen.

## Ofte stilte spørsmål

### Why don’t I see the animation while editing?

By design — the editor always shows the block in its final state. Preview or view
the page live to see it play.

### Does this work with any block, including third-party ones?

It’s enabled on the most common core blocks out of the box. It just needs the block
to support a normal `className` attribute, which almost all do.

### My block doesn’t show the animation controls — what can I do?

Wrap it in a Group block and animate the group instead.

### Does it slow down my site?

No. No extra animation library is loaded — just Animate.css’s CSS and a script under
1KB — and both are only served on pages that actually contain an animated block.

## Vurderinger

Det er ingen omtaler av denne utvidelsen.

## Bidragsytere og utviklere

«Jupa – Blocknimations» er programvare med åpen kildekode. Følgende personer har
bidratt til denne utvidelsen:

Bidragsytere

 *   [ Jupa ](https://profiles.wordpress.org/jupa8/)

[Oversett «Jupa – Blocknimations» til ditt språk.](https://translate.wordpress.org/projects/wp-plugins/jupa-blocknimations)

### Interessert i utvikling?

[Bla gjennom koden](https://plugins.trac.wordpress.org/browser/jupa-blocknimations/),
sjekk ut [SVN-repositoriet](https://plugins.svn.wordpress.org/jupa-blocknimations/),
eller abonner på [utviklingsloggen](https://plugins.trac.wordpress.org/log/jupa-blocknimations/)
med [RSS](https://plugins.trac.wordpress.org/log/jupa-blocknimations/?limit=100&mode=stop_on_copy&format=rss).

## Endringslogg

#### 1.1.0

 * Advance modal: animation Type moved to the top, followed by Animation and a Delay
   control (shown only for «On Enter» blocks).
 * Removed the «pressed» highlight from the Type toggle.
 * Accessibility: animated blocks respect the OS «reduce motion» preference.
 * Scroll-driven blocks now ignore any leftover toolbar delay.
 * Blocks injected after load (lazy embeds, carousels, AJAX pagination) are picked
   up automatically via a MutationObserver.
 * Performance: the animation CSS and script load only on pages that actually use
   animated blocks.

#### 1.0.0

 * First stable release.

#### 0.1.0

 * Initial development release.

## Meta

 *  Versjon **1.1.0**
 *  Sist oppdatert **4 dager siden**
 *  Aktive installasjoner **Færre enn 10**
 *  WordPress-versjon ** 6.8 eller nyere **
 *  Testet opp til **7.1.2**
 *  PHP-versjon ** 7.4 eller nyere **
 *  Språk
 * [English (US)](https://wordpress.org/plugins/jupa-blocknimations/)
 * Stikkord
 * [animation](https://nb.wordpress.org/plugins/tags/animation/)[block-editor](https://nb.wordpress.org/plugins/tags/block-editor/)
   [CSS Animation](https://nb.wordpress.org/plugins/tags/css-animation/)[gutenberg](https://nb.wordpress.org/plugins/tags/gutenberg/)
   [scroll animation](https://nb.wordpress.org/plugins/tags/scroll-animation/)
 *  [Avansert visning](https://nb.wordpress.org/plugins/jupa-blocknimations/advanced/)

## Vurderinger

Ingen omtaler er sendt inn ennå.

[Din omtale](https://wordpress.org/support/plugin/jupa-blocknimations/reviews/#new-post)

[Se alle omtalene](https://wordpress.org/support/plugin/jupa-blocknimations/reviews/)

## Bidragsytere

 *   [ Jupa ](https://profiles.wordpress.org/jupa8/)

## Brukerstøtte

Har du noe å si? Trenger du hjelp?

 [Vis brukerstøtteforumet](https://wordpress.org/support/plugin/jupa-blocknimations/)