Motion Effects

Introduction

Motion Effects add movement to a block that reacts to what your visitor does. There are two kinds: Mouse Effects, which respond to the cursor, and Scroll Effects, which animate the block as it moves through the viewport. You can use one or both on the same block to make a page feel more alive, all without code.

Turning On Motion Effects

Open the block and find the Motion Effects panel in its settings. From there you can switch on:

• Mouse Effects: Animations that react to the visitor’s cursor. These only work on desktop devices.
• Scroll Effects: Animations that play as the block enters or moves within the viewport.

A quick note on previewing: use the eye icon in the toolbar to preview, but the editor preview can differ from the live site, and scrolling effects may not play fully while editing. Always check the front end for the real result.

Mouse Effects

Mouse Effects make the block respond to cursor movement. Keep in mind they run on desktop only. There are two effects you can combine: Mouse Tracking and 3D Tilt.

Mouse Tracking

The block follows the visitor’s cursor around.

• Direction: Restricts movement to a single axis or lets it move freely. Choose Free, Horizontal, or Vertical.
• Invert: Makes the block move in the opposite direction to the cursor.
• Speed: Controls how fast the block reacts to mouse movement. Higher values mean faster movement.
• Offset: Sets the block’s starting position before any movement happens.

3D Tilt

The block tilts in 3D space as the cursor moves over it.

• Intensity: Controls the maximum tilt angle. Higher values create a more dramatic effect.
• Perspective: Sets the 3D depth. Lower values increase the perspective distortion.
• Face Towards Cursor: Tilts the block toward the cursor’s position.
• Glare: Adds a dynamic light reflection that moves with the cursor.

Scroll Effects

Scroll Effects animate the block based on its position as the page scrolls. Switch on any of the effects below, and combine them if you want. Each one shares a set of viewport controls that decide when, during the scroll, the effect runs.

Most effects use these shared controls:

• Viewport Start / Animation Start (%): The scroll position where the effect begins.
• Viewport End / Animation End (%): The scroll position where the effect finishes.

Horizontal Scroll and Vertical Scroll

Moves the block sideways or up and down as you scroll.

• Scroll Speed: Controls the speed of the scroll animation. Higher values mean faster movement.
• Invert: Plays the animation in the opposite direction.
• Animation Start (%): The scroll position at which the animation starts.
• Animation End (%): The scroll position at which the animation ends.

Blur

Brings the block into or out of focus as you scroll.

• Blur Intensity: Controls the amount of blur. Higher values create a stronger blur effect.
• Blur Direction: Determines whether the block blurs in, out, or a combination. Options are Focus In, Focus Out, Focus Out In, and Focus In Out.
• Viewport Start (%) and Viewport End (%): The viewport trigger points for the effect.

Fade

Fades the block’s opacity in or out as you scroll.

• Fade Intensity: Controls the opacity transition. Higher values create a more dramatic fade.
• Fade Direction: Determines whether the block fades in, out, or a combination. Options are Fade In, Fade Out, Fade Out In, and Fade In Out.
• Viewport Start (%) and Viewport End (%): The viewport trigger points for the effect.

Rotate

Spins the block as you scroll.

• Rotation Speed: Controls the speed of the rotation. Higher values mean faster rotation.
• Invert: Rotates the block in the opposite direction.
• Viewport Start (%) and Viewport End (%): Define when the effect starts and ends as you scroll.

Scale

Grows or shrinks the block as you scroll.

• Scale Intensity: Controls the amount of scaling. Higher values create a more dramatic effect.
• Scale Direction: Determines whether the block scales up, down, or a combination. Options are Scale In, Scale Out, Scale Out In, and Scale In Out.
• Viewport Start (%) and Viewport End (%): Define when the effect starts and ends as you scroll.
• Transform Origin X: The horizontal point the scale and rotation pivot around. Choose Left, Center, or Right.
• Transform Origin Y: The vertical point the scale and rotation pivot around. Choose Top, Center, or Bottom.

Device Visibility

Each scroll effect can be turned on or off per device.

• Desktop: Enable or disable the scroll effect on desktop devices.
• Tablet: Enable or disable the scroll effect on tablet devices.
• Mobile: Enable or disable the scroll effect on mobile devices.

A Few Tips

• Go easy. One subtle effect usually reads better than several strong ones stacked together.
• Use the Start and End values to time an effect to a specific part of the scroll, so it finishes before the block leaves the screen.
• Mouse Effects don’t run on touch devices, so don’t rely on them for anything important on mobile.
• Turn heavy effects off on mobile with the device toggles to keep things smooth on phones.

Troubleshooting

The effect doesn’t show in the editor: Scroll effects may not play fully while editing. Use the toolbar eye icon to preview, and check the live page for the real result.

Mouse Effects aren’t working: They only run on desktop. On a phone or tablet, they won’t do anything.

The effect starts or ends at the wrong time: Adjust the Start and End percentages so the animation runs over the part of the scroll you want.

The effect is too strong: Lower the intensity or speed, and consider narrowing the Start and End range.

FAQ

Q: What’s the difference between Mouse Effects and Scroll Effects?
A: Mouse Effects react to the cursor and run on desktop only. Scroll Effects animate the block as the page scrolls and work across devices.

Q: Why does the preview look different from my live site?
A: The editor preview is approximate, and scrolling effects in particular may not play fully while editing. Check the front end for accurate results.

Q: Can I use more than one effect at a time?
A: Yes. You can combine effects, such as Fade with Scale, or Mouse Tracking with 3D Tilt.

Q: Can I turn an effect off on mobile?
A: Yes. Each scroll effect has Desktop, Tablet, and Mobile toggles so you can control where it runs.