Scroll Triggered Animations Version 2.3.0

Settings

Use the settings below to gain greater control over your animations.

Default Animations

Below is a list of default animations which you can use on any element on your site. Hover over any animation to see a preview. Simply add the CSS class to any element on your site and watch the magic happen.

Available for all users

move-in-up, left, right, down
fade-in-up, left, right, down - Just use 'fade-in' if you'd like a static fade
flip-up, left, right, down
bounce-in-up, left, right, down

Only Available with premium

grow-up, left, right, down
zoom-in
skew-in-left, right
blur-in
colour-gain

Speed and delays (Only Available with premium)

Use these classes either alone or in multiples along with a default animation class to gain greater control over your animation.

speed-xxx - Control the speed of your animations and get the timing just right. Replace 'xxx' with your chosen speed in milliseconds.
delay-xxx - Control the delay of your animations and get the timing just right. Replace 'xxx' with your chosen delay in milliseconds.

Advanced Animations

Tailor your animations to your site!

Activate the element you wish to animate. Activate by either the Class, ID, Tag or any other CSS Selector.

Activate an element

Activate Element

Creating your animations

Once your element(s) have been activated using the setting above. You'll need to create the animation effect using CSS.

Activating an element simply tells the script to add the class 'scroll-triggered' when it is due to animate. Meaning you can target the element before and after it has been triggered. Your CSS could look like this:


    .button { opacity:0 ; transition: all 1s }

    .button.scroll-triggered { opacity: 1 ; }

Apply the CSS using your own theme CSS file or by using the textarea below!

Just remember to use the transition property to decide how long you would like the animation to last for.

Scroll Triggered Animations Version 2.3.0

Default Animations

Advanced Animations

Settings

Settings

Default Animations

Available for all users

Only Available with premium

Speed and delays (Only Available with premium)

Use these classes either alone or in multiples along with a default animation class to gain greater control over your animation.

Advanced Animations

Activate an element

Creating your animations

Once your element(s) have been activated using the setting above. You'll need to create the animation effect using CSS.

Ratings & Reviews

About the plugin