--- title: "Animation (Pro): Animate Blocks on Scroll" description: The Animation extension in Ultimate Blocks Pro adds fade, slide, bounce, zoom and other effects to any Ultimate Blocks block when it scrolls into view. url: "https://ultimateblocks.com/docs/animation/" updated: "2026-11-07" category: Extensions --- # Animation (Pro): Animate Blocks on Scroll **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](https://wordpress.org/plugins/ultimate-blocks/) plugin and [Ultimate Blocks Pro](https://ultimateblocks.com/pricing/), 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 1. Open the post or page in the WordPress block editor and click the Ultimate Blocks block you want to animate. 2. In the block sidebar, open the **Settings** tab (gear icon). 3. Scroll down and click **Animation** to expand the panel. 4. 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**. 5. Set **Repeat**, **Duration (Seconds)** and **Delay (Seconds)** if you want to change the defaults. 6. Click **Preview Animation** to see the effect in the editor. 7. 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. ## Related docs - [Visibility Control (Pro): show blocks by user or date](https://ultimateblocks.com/docs/visibility-control/) - [Responsive Control: hide blocks on mobile, tablet or desktop](https://ultimateblocks.com/docs/responsive-control/) - [Custom CSS: style a single block](https://ultimateblocks.com/docs/custom-css/) - [Saved Styles (Pro): save and reuse block styles](https://ultimateblocks.com/docs/how-to-save-a-style/) - [Fix: Ultimate Blocks styles not showing on your site](https://ultimateblocks.com/docs/fix-ultimate-blocks-styles-not-showing/)