Pinegrow Animate It – Scroll Animations for Pinegrow
Pinegrow Animate It is a free Pinegrow plugin that lets you add a bunch of cool cross-browser animations to your projects.
Based on CSS3 Animate it , it lets you easily animate elements in your project as the user scrolls, as well as on click events.
It features over 30 different animation effects and you can control the speed the animation plays at – For a full list of animations click here.
Once you activate the plugin it will add some new options to the ACT panel.
It is very easy to use and you can add animations such as fade in or bounce down to elements with just a few clicks.
How to Use:
Additonal frameworks needed: none
Download and install the plugin by activating the pg-animateIt.js file.
If you have never installed a Pinegrow Plugin, use this guide as reference.
Once Installed and Activated the plugin options should now appear in your ACT Panel
To animate an element you must first add the animatedParent Class to a Div that wraps the element you will be animating.
The animatedParent Class will automatically be added once you select an element and click “Set Parent Animation”.
Next you need to add the “animated” class to the element inside the parent element you will be animating.
This is automatically done once for you once you highlight the element and click “Animate an Element”.
When you click this, it adds the class, now all you need to do is set the animation type and the speed of the animation.
Once the animation is added, you may need to refresh the page in Pinegrow (the element on the page might appear broke when the animation is added,don’t worry, if this happens just click refresh in Pinegrow.)
You can test the animation in the browser.
While not supposed to be as robust as the Animator Pro Pinegrow plugin, it should be easy to use, and this free Pinegrow plugin also allows you to do a few more things, like animation sequencing, animate on scroll, animation delays and offsets, as well as animate once and animate on click.
Check out the instructions on jackonthenet for a full description of what you can do with this Free Pinegrow Animation Plugin.