Motion Effects add movement to any block: an entrance animation when it scrolls into view, effects that follow the scroll, effects that follow the mouse, and sticky positioning. They work on ShapeBlock blocks, core blocks, and blocks from other plugins.

How to Use Motion Effects

Step 1: Make Sure the Feature Is On

1. In your WordPress dashboard, go to ShapeBlock > Extensions.
2. Find the Motion Effects card and turn its switch on. The change is saved right away.

Step 2: Add an Effect to a Block

1. Open a page or post in the block editor and select any block.
2. In the right-hand sidebar, open the Motion Effects panel. On ShapeBlock blocks it is in the Settings tab.
3. Set the effects you want. Every effect plays in the editor as you set it.

Motion Effects Settings

1. Entrance Animation

• Entrance Animation: Choose an animation that plays when the block scrolls into view. The list is grouped into Fading, Zooming, Bouncing, Sliding, Rotating, Attention Seekers, Light Speed, and Specials, for example Fade In Up, Zoom In, Bounce In, or Slide In Left.
• Animation Duration: Choose Slow, Normal, Quick, Fast, or Custom. With Custom, set the Duration (ms).
• Delay (ms): Wait this long before the animation starts. Useful for making cards in a row come in one after another.
• Play again each time it comes into view: Play the animation every time the block scrolls into view, not only the first time.
• Preview: Play the animation again in the editor.

On a dropdown or mega menu, the entrance animation plays each time the menu opens.

2. Scrolling Effects

Turn on Move the block as the page scrolls, then turn on one or more effects. Each effect starts when the block comes into view.

• Vertical Scroll: Move the block Up or Down. Set the Speed.
• Horizontal Scroll: Move the block To Left or To Right. Set the Speed.
• Transparency: Fade the block: Fade In, Fade Out, Fade Out In, or Fade In Out. Set the Level.
• Blur: Blur the block with the same four choices. Set the Level.
• Rotate: Turn the block To Left or To Right. Set the Speed.
• Scale: Scale Up, Scale Down, Scale Down Up, or Scale Up Down. Set the Speed.

Each effect also has Starts at and Ends at, the part of the screen (in %, from the bottom) where the effect runs. Rotate and Scale also have X Anchor Point and Y Anchor Point, the point the block turns or grows around.

• Effects Relative To: Choose Viewport to run the effects as the block crosses the screen, or Entire Page to run them from the top of the page to its end.
• Apply Effects On: Untick Desktop, Tablet, or Mobile to turn the scrolling effects off on that device.

3. Mouse Effects

Turn on Move the block with the pointer to use these effects. They work on screens with a mouse.

• Mouse Track: The block moves with the pointer. Choose Opposite or Direct and set the Speed.
• 3D Tilt: The block tilts towards the pointer. Choose Direct or Opposite and set the Speed.

4. Sticky

• Sticky: Choose Top or Bottom to keep the block at the top or bottom of the screen once it gets there. None turns it off.
• Offset (px): Set the space between the block and the edge of the screen while it sticks.
• Stay in its container: Let go of the block when the end of the block it sits in comes up.
• Sticky On: Choose the devices where the block sticks.

Note: Visitors who ask their device for reduced motion see the block still.

To stop Motion Effects on the whole site, turn off the Motion Effects card under ShapeBlock > Extensions. Blocks keep their settings and simply stop moving.