Animations and Stick

By the end of this page, you will know how to animate a block and how to make one stay in view while visitors scroll.

Animations only play when you preview

In the editor, blocks stay still so you can drag and resize them easily. To see an animation or a stuck block in action, click Preview or visit your published site.

Animate a block

1. Click a block.
2. Open the Animation group in the Properties tab.
3. Pick a Trigger and an Effect.
4. Click Play to see the effect once.

Triggers

• Once. The effect plays the first time the block scrolls into view.
• Every Time. It plays again each time the block scrolls back into view.
• Constant. It keeps going all the time.

Effects

The effects you can pick depend on the trigger.

• Once and Every Time: Fade, Fade Up, Fade Down, Fade Left, Fade Right, Blur In, and Zoom In.
• Constant: Float and Pulse.

If you change the trigger and your effect no longer fits, we switch it to the first one that does.

Fine-tune it

• Duration. How long the effect takes.
• Delay. How long to wait before it starts. Good for making blocks appear one after another.
• Easing. How the motion speeds up and slows down. Smooth eases out gently, Balanced eases in and out, and Linear moves at a steady pace.
• Distance. How far a Fade Up, Down, Left, or Right travels. Only shown for those effects.
• Blur Amount. How blurry Blur In starts. Only shown for that effect.

Each of these can follow your theme or be set to your own value with the Custom toggle. Duration, Easing, Trigger, and Effect follow your theme's default until you choose Custom. To change the default for every block, see Styling and Theme.

Spin on Scroll

Turn on Spin on Scroll to make a block rotate as the visitor scrolls. Choose Spin Speed to set how fast. It works together with the other effects.

Stick a block

Stick keeps a block on screen while the rest of its section scrolls past. It lets go when the bottom of the section reaches it. Good for a side title next to a long list.

1. Click a block.
2. In the Position group, set Stick to On.
3. Pick a Stick Offset to choose how far from the top of the screen it stays.

If your menu is set to stay at the top, a stuck block leaves room for it so the menu never covers the block.

Good to know

• Stick doesn't carry over to Tablet and Phone. Switch to Tablet or Phone with the toolbar buttons and turn Stick on there if you want it. See Responsive Editing.
• Stick isn't available for a block placed inside a Columns block.
• Animation is not available for a block inside a Columns block either. Animate the whole Columns block instead.
• Animations aren't set separately per screen size. One setting applies everywhere.
• Plenty of motion can be hard on some visitors. Use it sparingly.