Skip to content

Animate elements on scroll, hover or click

You can make a section, a row or any content element move. Fade a heading up as it scrolls into view, let a button follow a moment later, or pulse an icon on hover. Each of them has an Animation panel in its settings. The example fades in a heading, then a registration button after a short delay.

Fade in a heading and a button

  1. Click Add Elements in the empty content area and pick Section from the Layout tab.
  2. Hover the section and open More > Settings.
  3. Under HTML classes, pick Align text center and click Save.
  4. Click + on the section and pick Button from the Content tab. Its settings open.
  5. Type Register now in Title and /register in Link.
  6. Open the Animation panel and set Animation start to On appear.
  7. Set Animation in to fadeInUp.
  8. Under Hidden, tick Before in-animation.
  9. Set In-delay to 600 and click Save.
  10. Click + on the section again and pick Text from the Content tab. It lands above the button.
  11. Type a heading, such as Open day 2026, and set it to Heading 2 in the editor toolbar.
  12. Open the Animation panel. Choose On appear, fadeInUp and Before in-animation, as for the button.
  13. Set Duration to 800 and click Save.
  14. Click Save on the toolbar.
  15. Open the view menu (the eye icon on the toolbar) and choose Preview.

More effects to try

  • Scroll reveal: On appear, fadeInUp, Before in-animation and a Duration of 800.
  • Staggered cards: the same effect on three cards, with an In-delay of 0, 200 and 400.
  • Attention pulse: On appear, pulse, Infinite on and a Duration of 1500.
  • Hover pulse: On hover, pulse and a Parent number of 0, so only the element itself reacts.
  • Tab reveal: On trigger and fadeIn on the elements inside a tab. They play each time the tab opens.

What you see

When you save the text, the editor plays both effects: the heading fades up over 800 milliseconds and the button follows 600 milliseconds later. Visitors see the same as the section scrolls into view, once per page load. Both stay invisible until their effect starts, because Before in-animation is ticked.

Settings

Setting What it does Default
Animation start When the effect plays: On appear (scrolled into view), On hover, On click or On trigger (when the carousel slide, tab or toggle that holds the element opens) No animation
Animation in The entrance effect: fades, slides, zooms, flips and attention effects such as bounce, pulse and shake No animation
Animation out The exit effect, from the same list. Shows for On hover and On trigger only. No animation
Hidden Before in-animation keeps the element invisible until its effect plays. After in-animation hides it once the effect ends. Neither
Infinite Repeats the effect without end Off
Appear boundary For On appear: how far below the screen the effect starts, in percent of the screen height. 0 starts it as the element scrolls into view; 100 starts it one screen height earlier. 100
Duration Length of the effect, 0 to 3000 milliseconds 1000
In-delay Wait before the entrance plays, up to 10000 milliseconds 0
Out-delay Wait before the exit plays, up to 10000 milliseconds 0
Parent number For On hover and On click: which element the visitor points at or clicks. 0 is the element itself, 1 its parent, 2 the parent's parent. 1

Columns have no Animation panel. Neither do the single tabs, toggles and slides inside layout elements. Animate the element inside them instead.

If you don't see the animation

  • The element never appears. Before in-animation hides it until its effect plays, but Animation in is No animation. Pick an effect in Animation in.
  • The effect played once and stopped. On appear plays once per page load. Reload the page to see it again, or switch on Infinite for an effect that repeats.
  • The effect starts before the visitor reaches the element. Appear boundary is high: at 100, the effect starts one screen height before the element scrolls into view. Set it to 0 in the Animation panel.
  • Hovering near the element starts the effect. Parent number is 1, so the parent listens for the pointer. Set Parent number to 0.

What's next?

  • Hover effects: change colours, shadows or opacity while the pointer rests on an element.
  • Backgrounds: give the animated section a colour, a photo or a gradient.
  • Carousel layout: play On trigger effects each time a slide opens.
Something wrong or missing on this page? Report it or edit the page.