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
Or check out for an interactive demonstration