Add motion effects to make elements stand out from the rest of the page.
Follow the steps below to start adding animations to your element:
Click on the + icon
Go to the Content tab
Select an element
Go to the Animation tab
Select an animation option from the Animation Start settings
On Appear means the animations will begin once the element appears in the browser window
On Hover means the animations will begin once you mouse over the element
On Click means the animations will begin once you click on the element
On Trigger means the animation will appear once triggered by a script
Select an Animation In that will appear once the Start Animation begins. For example if you select Hover, the animation will appear once the mouse is over the element
Optionally, Select an Animation Out that will appear once the Start Animation stops. For example if you select Hover, the animation will appear once the mouse is not over the element anymore
Set the option for the element to be Hidden, before or after the In-Animation. Mainly this is used when the In-Animation is set to an animation that has "in". For example: if you select to hide the element Before the in-animation. If your start animation option is On Click, the element won't be visible until you click it (so don't do this).
Set the boundary of the element in the Appearance Boundary. For example if set to 50 the animation will start once the element is scrolled past the middle of the browser window. Setting this to 100% will have the element animate immediately when the element scrolls into the browser window.
Switch on the Infinite for the animation to keep repeating
Set the Duration of the animation in milliseconds (lower duration equals faster motion)
Set a delay for the in animation by the In-Delay settings (higher delay equals slower motion)
Set a delay for the out animation by the Out-Delay settings (higher delay equals slower motion)
Once you’ve selected your preferred settings, you can click on Save Changes and you're done!