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.

DOWNLOAD ANIMATE IT FOR PINEGROW

About Author

Ben

2 thoughts on “Pinegrow Animate It – Scroll Animations

    1. I just tested and its working fine with latest PG – Can you explain your issue, is it not loading for you or not animating?

      Have you followed the instructions correctly eg add the parent class first?

      Are you using a framework? If so which one?

      How are your scripts loading, have you checked the animatit js script is the last one to be loaded on your page?

      Are there any errors in the console?

Comments are closed.


LAST CHANCE: 5 Plugins Bundle for $29 (Ends Cyber Monday)
VIEW DEAL
close-image