BUILT WITH

AnimatorProPinegrowPlugin

Create "Code Free" animations and interactions with this Pinegrow Plugin!. Many triggers and Custom animations are available through Pinegrow GUI.
Buy Now!

Many Features Are Available

Triggers

You will find all the triggers you need. On Load, On Click, On Hover, On Class Added and Section Scroll.

Main Settings

You can select duration time, delay time and transitions.

Custom Steps

Write your own style steps! Specify what triggers initialise which Styles and when.

How it Works

General Settings

  • Set trigger
  • Set target (leave blank to effect current element)
  • Set transition (default value: 'Ease')
  • Set animation duration (default value: 500ms)
  • Set animation delay (default value: 0ms)
  • Set animation iteration (default value: 1)

Animation Steps

  • Set initial state
  • Set as many steps as you want (steps are styles)
  • Set classes to add
  • Set classes to remove

Trigger Properties

  • Scroll trigger
    • Set scroll direction and scroll offset
  • Click trigger
    • Set styles if this is the second click
    • Set classes to add on the second click
    • Set classes to remove on the second click
  • Hover trigger
    • Set styles if the user hovers out
    • Set classes to add on hovering out
    • Set classes to remove on hovering out

Example 1 Scroll up and down


Scroll up/down trigger is assigned to this block to show it and hide it when the user scroll up and down.

You can animate any element to trigger on scrolling.

Element appears from the Right as you scroll down, then hides as you continue scrolling down.

There are four animations settings here

  • Scroll down:
    Init state: opacity:0;transform:translateX(-30px);
    Step 1: opacity:1;transform:translateX(0px);
    Scroll direction: Down
    Scroll offset: 450px
  • Scroll down:
    Step 1: opacity:0;transform:translateX(30px);
    Scroll direction: Down
    Scroll offset: 50px
  • Scroll up:
    Step 1: opacity:1;transform:translateX(0px);
    Scroll direction: Up
    Scroll offset: 60px
  • Scroll up:
    Step 1: opacity:0;transform:translateX(30px);
    Scroll direction: Up
    Scroll offset: 500px

Hi there, I'm very simple popup, appear and disapear according to example 2 section

Example 2 Scroll up and down Effect diffrent element


You can add scroll trigger on any element but you can effect another element by setting the target and animate the target when event triggered.

When you scroll down the element appear from the bottom, and when you keep scrolling down the element will hide.

There are four animations settings here

  • Scroll down:
    Target: .example-2-popup
    Init state: bottom:-100px;
    Step 1: bottom:10px;
    Scroll direction: Down
    Scroll offset: 0px
  • Scroll down:
    Target: .example-2-popup
    Step 1: bottom:-100px;
    Scroll direction: Down
    Scroll offset: -500px
  • Scroll up:
    Target: .example-2-popup
    Step 1: bottom:10px;
    Scroll direction: Up
    Scroll offset: -450px
  • Scroll up:
    Target: .example-2-popup
    Step 1: bottom:-100px;
    Scroll direction: Up
    Scroll offset: 10px

Example 3 Click trigger #1


Clicking the above button element, causes this message block to alternately show and then hide.

You can animate any element when its clicked, or even animate a totally separate element instead.

The Button element will slide down when the button first clicked, then slide up on the second click

There is one animation setting here

  • Click:
    Target: .click-block-container
    Init state: height:0px;
    Step 1: height:auto;
    Second Click:
    • Step 1: height:0px;

Example 4 Click trigger #2


You can add click trigger on any element and animate it or animate another element when event triggered.

When you click on the button the sidebar will slide-in-left, and when you click anywhere in the page the sidebar will slide-out-right.

On the button there are twp animations settings

  • Click:
    Target: .sidebar
    Init state: right:-400px;
    Step 1: right:0px;
    Second Click:
    • Step 1: height:0px;
  • Click:
    Target: .sidebar-bg
    Add classes: open
    Second Click:
    • Add classes: open

Example 5 Hover trigger


Hi There! ;)

You can now animate any element by hovering over it, or cause another element to animate instead

When you hover over the image, icons, text and gradient will appear, and when you hover out they will disapear.

There are three animations settings here

  • Hover:
    Target: > .fa the icons inside corrent element
    Init state: transform:rotate(30deg) scale(0.9);
    Step 1: transform:rotate(0)scale(1);
    Hover out:
    • Step 1: transform:rotate(30deg) scale(0.9);
  • Hover:
    Target: > h3 the headding inside corrent element
    Init state: transform:translateY(40px);
    Step 1: transform:translateY(0px);
    Hover out:
    • Step 1: transform:translateY(40px);
  • Hover:
    Target: > .img-overlay the .img-overlay inside corrent element
    Init state: opacity:0;
    Step 1: opacity:1;
    Hover out:
    • Step 1: opacity:0;

Example 6 Class Added trigger


Tab 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat iusto deleniti sequi aperiam dicta iure veritatis neque eius ducimus fugiat saepe, esse animi eos cum architecto hic dolorum, omnis enim!

Tab 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat iusto deleniti sequi aperiam dicta iure veritatis neque eius ducimus fugiat saepe, esse animi eos cum architecto hic dolorum, omnis enim!

Tab 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat iusto deleniti sequi aperiam dicta iure veritatis neque eius ducimus fugiat saepe, esse animi eos cum architecto hic dolorum, omnis enim!


You can now animate any element inside tabs and carousel

When you click on a tab, the text inside that tab will be animated.

There are three animations settings here

  • Class Added:
    Target: > h3 the tab title
    Duration: 1000 1 second
    Init state: transform:translateY(30px);opacity:0;
    Step 1: transform:translateY(0px);opacity:1;
    Class removed:
    • Step 1: transform:translateY(30px);opacity:0;
  • Hover:
    Target: > p the paragraph inside the tab
    Duration: 1000 1 second
    Init state: transform:translateX(30px);opacity:0;
    Step 1: transform:translateX(0px);opacity:1;
    Class removed:
    • Step 1: transform:translateX(30px);opacity:0;

Supported Properties Tram

  • 'color' ( color )
  • 'background' ( color )
  • 'outline-color' ( color )
  • 'border-color' ( color )
  • 'border-top-color' ( color )
  • 'border-right-color' ( color )
  • 'border-bottom-color' ( color )
  • 'border-left-color' ( color )
  • 'border-width' ( length )
  • 'border-top-width' ( length )
  • 'border-right-width' ( length )
  • 'border-bottom-width' ( length )
  • 'border-left-width' ( length )
  • 'border-spacing' ( length )
  • 'letter-spacing' ( length )
  • 'margin' ( length )
  • 'margin-top' ( length )
  • 'margin-right' ( length )
  • 'margin-bottom' ( length )
  • 'margin-left' ( length )
  • 'padding' ( length )
  • 'padding-top' ( length )
  • 'padding-right' ( length )
  • 'padding-bottom' ( length )
  • 'padding-left' ( length )
  • 'outline-width' ( length )
  • 'opacity' ( number )
  • 'top' ( length, percentage )
  • 'right' ( length, percentage )
  • 'bottom' ( length, percentage )
  • 'left' ( length, percentage )
  • 'font-size' ( length, percentage )
  • 'text-indent' ( length, percentage )
  • 'word-spacing' ( length, percentage )
  • 'width' ( length, percentage )
  • 'min-width' ( length, percentage )
  • 'max-width' ( length, percentage )
  • 'height' ( length, percentage )
  • 'min-height' ( length, percentage )
  • 'max-height' ( length, percentage )
  • 'line-height' ( number, length, percentage )
  • 'transform' ( (see transform info below) )
  • 'scroll-top' ( number (tween-only) )
  • 'scroll-left' ( number (tween-only) )

For transform values

  • translate ( X,Y,Z )
  • translateX ( length, percentage )
  • translateY ( length, percentage )
  • translateZ ( length, percentage )
  • rotate ( deg )
  • rotateX ( deg )
  • rotateY ( deg )
  • rotateZ ( deg )
  • scale ( number )
  • scaleX ( number )
  • scaleY ( number )
  • scaleZ ( number )
  • skew ( X,Y )
  • skewX ( angle )
  • skewY ( angle )
  • perspective ( length )

Can you think of any other examples or have even better ideas? now with AnimatorPro you have the power to create them without needing to write any Javascript code!

Buy Now!

GET ANIMATORPRO FOR ONLY $19
With 30 day money back guarantee

AnimatorPro is a Pinegrow plugin. Buy it once, activate it on your Pinegrow and use it on as many projects as you want.

It doesn't work on Pinegrow 3.0 yet, we will update it soon
Personal license Company license
AnimatorPro $19
+ VAT for EU
$29
+ VAT for EU
License is suitable for Only for individuals Companies
Who can use the plugin? Only the person who owns the license One user per license
Install on As many computers as you wish As many computers as you wish
Free updates All updates for version 1 All updates for version 1

Are you a Student or a Teacher? Get a special offer now!.

Interested in the AnimatorPro plugin?
Keep in touch and register to receive the plugin updates