You can animate the position, size, styles, etc. of an element easily with the animation add-on.

See Extending elements/sections with add-ons for some background on the topic, but here we’ll focus on the practicalities of applying animation.

Step 1 - Attach the animation add-on

  • Select an element or a section

  • Click the add-ons icon in the Top Bar OR Right-click and Choose “Add-ons > Add new“

  • Select “Animation” from the list

Step 2 - Edit animation settings

  • Click the newly added Animation icon in the Top Bar OR Right-click the element/section and choose “Add-ons > Animation“

Let’s go over the different options you have …

  • Animate on …

    • Load — when the item comes into view

    • Click

    • Hover

    • Scroll animation — where the animation is controlled by scrolling the page

  • Preset

    • Fade in, slide in, etc.

    • Custom

  • Settings

    • Duration — start to finish, in seconds

    • Delay — before start, in seconds

    • Easing — “acceleration curve”, experiment and see which ones you like!

    • Loop — toggle on to repeat the animation once it has been triggered

    • Run once (for “Animate on load” only) — toggle on to run animation only when element/section becomes visible the first time

    • Trigger (for “click” and “hover” only) — trigger animation through a different element

    • Properties — what is being animated, i.e. opacity, position, background color, etc.

Tip - Remember that styles are based on CSS, so to change the color of a box you need to use “background color” since “color” affects only the text color.

  • Extra settings for scroll animation

    • Position

    • Offset start

    • Offset end