Animations Library

Scroll Down

There are dozens, endless amounts of ways you can animate objects in CSS using @keyframes. Google has tons of resources and open sourced coding you can find. The following are just common examples and used frequently.

Constantly Moving

Up and Down

Side to Side

Spinning

Animations On Scroll (AOS)

All Animations On Scroll (AOS) can be found at:

https://michalsnik.github.io/aos/
To use any of the animations follow these steps:

1.

Insert the following code into:
Site Template Layout -> Layout Builder -> Options -> Custom Javascript

2.

Add the following class to the object you wish to animate (ex: Div, Img, Button, etc)


3.

Add the data-aos attribute with the animation of your choosing (fade-up, flip-left, zoom-in, etc)


Examples

Fade-Up
Flip-Left
Zoom-In