Animation framework

Theme has 3 possible levels of animation: inner FRAnimation framework, AOS framework in bundled Greenshift plugin and GSAP animation framework of Greenshift plugin. You can use them to build any kind of animation: transform, on scroll, parallax, 3d animations, hover, click animations, reveals, mouse interactions, SVG drawing and SVG path, text animations.

FRAnimation

But let’s show you inner FRAnimation framework. It’s very light library (less then 1 kb) of transform animations based on classes. It works on scroll, when user reaches element, animation is triggering.

To enable this type of animation, you must add special class

fr-animate

You can add it in Additional class field

By default, simple appearance will be animated, so, you need to add also secondary class with animation type.

All available types are next:

Sliding

fr-move-up fr-move-down fr-move-left fr-move-right

These are for simple sliding appearance.

Flip

I am flip Effect

fr-flip

This one is for flip and slide effect.

Scale

You can also choose delay and duration. Here are available classes for delays

fr-delay-3 fr-delay-5 fr-delay-7 fr-delay-10 fr-delay-15

and duration classes

fr-time-5 fr-time-10 fr-time-15

AOS framework

Animation framework in Greenshift plugin is another possible way to add animations. Difference is that AOS framework can work also in editor so you can see how it looks when you compose your page. AOS framework has more complex options and possibilities including adding custom animations and easing presets.

Example how it works

GSAP Animation framework

This is paid addon for Greenshift. It allows you to make any kind of very complex animations, reveals, parallax, SVG animations, path animations, hover, click animations.

This is very big topic so we will make separate video about this