Anything can be animated in the Tri theme using the built in animate classes.

To animate anything in Tri theme, you simply add the animation classes to the element.

[code type=”markup”]

[/code]

Animations can be added to any elements class. The Tri Theme blocks include animation options as a dropdown.

Types of Animation

The type of animation can be changed depending on the combination of classes you include.
The animation types are:

• flipInX
• flipInY
• fadeIn
• fadeInU
• fadeInDown
• fadeInL
• fadeInR
• bounceIn
• bounceInUp
• spin

Note: the following animations are looped using “infinite” (see below) so you can easily see what they are.

Infinite Animations

You can animate on repeat by adding “infinite” to the classes.

Delaying Animations

You can choose to delay the animation if it appears further down you page by adding the class “scrl-show”. This will make the animation fire once it is in view.
You can further delay an animation by adding any of the following classes which will delay it even more:

• delay-1
• delay-2
• delay-3
• delay-4