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.
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
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
Scroll animation — where the animation is controlled by scrolling the page
Fade in, slide in, etc.
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