What does this plugin do and how does it work?
HTML / CSS doesnt currently offer a way to start an animation based on the users scroll position. This plugin adds a simple way to bi-pass this using jQuery. Simply choose how far off the viewport you'd like the animations to start, use either some default animations or make your own animation using the advanced settings then watch the magic happen before your eyes.
Standard Settings
Default Animations
Advanced Animations
Why upgrade to premium?
Standard Settings
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
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
Want to tailor your animation 100% to your site?
First off, you need to activate the element you want to animate. You can do that just below! Activate by either the Class, ID, Tag or any other CSS Selector.
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.
Why upgrade to premium?
Premium offers many benefits over the standard version. Please see the table below which indicates what features you may be missing.
| Feature | Standard | Premium |
|---|
| Default Animations | | |
| - Disable Default Animations on mobile | | |
| - Default Animations speed control | | |
| - Default Animations delay control | | |
| - Premium default animations | | |
| - Support for Default Animations | | |
| Advanced Animations | | |
| - Activate classes | | |
| - Activate an unlimited amount of element | | |
| - Support for Advanced Animations | | |