Animation is an Ultimate Blocks Pro extension that adds an entrance or attention effect to any Ultimate Blocks block, such as a fade, slide, bounce or zoom. The animation plays when the block scrolls into view, and you can set how long it lasts, when it starts and how often it repeats.
| Where to find it | Block sidebar, Settings tab (gear icon), Animation panel |
| Plan | Pro |
| Works with | All Ultimate Blocks blocks |
| When it plays | When the block scrolls into view on the live page |
What you need #
- The free Ultimate Blocks plugin and Ultimate Blocks Pro, both active.
- The Animation extension turned on. Go to Ultimate Blocks in your WordPress admin menu, open the Extensions tab and check its toggle.
What you can use it for #
- Fade in testimonials, features or pricing boxes as visitors scroll down a landing page.
- Make a call to action or coupon box bounce or pulse to draw attention.
- Slide in steps of a process one after another by giving each block a slightly longer delay.
- Zoom in a counter or progress bar so the numbers feel more lively.
How to animate a block #
- Open the post or page in the WordPress block editor and click the Ultimate Blocks block you want to animate.
- In the block sidebar, open the Settings tab (gear icon).
- Scroll down and click Animation to expand the panel.
- Click the animation button (it shows None by default) to open the list of animations. Scroll through the groups or type in the Search box, then click an animation, for example Fade In Up.
- Set Repeat, Duration (Seconds) and Delay (Seconds) if you want to change the defaults.
- Click Preview Animation to see the effect in the editor.
- Click Save or Update, then scroll down the live page to see it play.
Animation settings #
Animations #
The list is grouped by type. Choose None to remove an animation.
| Group | Animations |
|---|---|
| Attention seekers | Bounce, Flash, Pulse, Rubber Band, Shake X, Shake Y, Head Shake, Swing, Tada, Wobble, Jello, Heart Beat |
| Back entrances and Back exits | Back In or Back Out, Down, Left, Right or Up |
| Bouncing entrances and Bouncing exits | Bounce In, Bounce Out and their Down, Left, Right and Up versions |
| Fading entrances and Fading exits | Fade In, Fade Out and their directional and “Big” versions, plus diagonal fades such as Fade In Top Left |
| Flippers | Flip, Flip In X, Flip In Y, Flip Out X, Flip Out Y |
| Lightspeed | Light Speed In Right, Light Speed In Left, Light Speed Out Right, Light Speed Out Left |
| Rotating entrances and Rotating exits | Rotate In, Rotate Out and their Down Left, Down Right, Up Left and Up Right versions |
| Specials | Hinge, Jack In The Box, Roll In, Roll Out |
| Zooming entrances and Zooming exits | Zoom In, Zoom Out and their Down, Left, Right and Up versions |
| Sliding entrances and Sliding exits | Slide In or Slide Out, Down, Left, Right or Up |
Timing and repeat #
- Repeat: choose Repeat to play the animation a set number of times, or Infinite to loop it for as long as the page is open.
- Repeat Count: shown when Repeat is selected. Set how many times the animation plays. Leave it at 1 for most entrance effects.
- Duration (Seconds): how long one run of the animation takes. The default is 1 second. Shorter values feel snappier.
- Delay (Seconds): how long to wait after the block comes into view before the animation starts. The default is 0.
- Preview Animation: play the animation once in the editor so you can check it.
When does the animation play? #
- The animation starts when about 15% of the block is visible in the browser window, so blocks further down the page animate as the visitor scrolls to them.
- Blocks that are already on screen when the page loads animate right away.
- A normal animation plays once per page load. It does not play again if the visitor scrolls up and down.
- With Infinite, the animation keeps looping once the block has come into view.
- Until it plays, the block is invisible. This stops it from flashing on screen before the effect starts.
Tip: Use entrance animations (for example from Fading entrances or Sliding entrances) for content. Exit animations end with the block hidden or moved off screen, so visitors may not see it at all.
Common problems #
- The block never appears on the live page. The animation needs a small script to run. If a caching or optimization plugin delays or combines JavaScript, exclude Ultimate Blocks Pro scripts or turn off “delay JavaScript”, then clear the cache.
- The block disappears after the animation. You picked an exit animation. Choose an entrance animation instead.
- Nothing happens in the editor. Animations play on the live page. In the editor, click Preview Animation.
- The Animation panel is missing. Check that Ultimate Blocks Pro is active and the Animation extension is turned on in Ultimate Blocks > Extensions.
Frequently asked questions #
Is the Animation extension free?
No. Animation is part of Ultimate Blocks Pro. Once Pro is active, it works on every Ultimate Blocks block.
Do Ultimate Blocks animations play on scroll?
Yes. Each animation starts when the block scrolls into view, at about 15% visible. Blocks already on screen animate when the page loads.
Can I make an animation loop forever?
Yes. Set Repeat to Infinite. The animation then loops for as long as the page is open.
How do I animate blocks one after another?
Give each block the same animation and a growing Delay (Seconds) value, for example 0, 0.2 and 0.4.
Can I animate blocks from other plugins?
No. The Animation panel is added to Ultimate Blocks blocks only.
