Fine-Tuning Animation Timing, Easing and Button Hover Effects

Beyond picking an effect, the Animations tab lets you control how fast and how smoothly it plays, and add hover reactions to buttons without any CSS.

Timing Controls

After choosing an entrance effect, click Adjust Animation:

• Duration: 0.1 to 3 seconds.
• Delay: up to 5 seconds before it starts.
• Scale: 0.5x to 2x, for effects that change size.
• Easing: Linear, Ease In, Ease Out or Ease In Out, which shape how motion speeds up and slows down.

Elements stay hidden during a delay, then play once they scroll into view. They do not replay when you drag, switch device view or edit.

Add a Button Hover Effect

1. Select the button and open the Animations tab.
2. Click Hover Animation.
3. Point at an effect card to preview it on the button.
4. Click to apply, then Adjust Animation to set duration, delay and easing.
5. Save and publish.

Extra settings depend on the effect family:

Good to Remember

• If a button has both effects, the hover starts after the entrance finishes.
• Hover effects switch off on touch devices and screens under 1024 pixels wide, so phone visitors never get stuck in a hover state.

Good to know: Keep durations between 0.3 and 0.8 seconds for effects that feel responsive instead of sluggish.