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;
-
Step 1:

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;
-
Step 1:
-
Click:
Target: .sidebar-bg
Add classes:open
Second Click:-
Add classes:
open
-
Add classes:

Example 5 Hover trigger
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);
-
Step 1:
-
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);
-
Step 1:
-
Hover:
Target: > .img-overlay the .img-overlay inside corrent element
Init state:opacity:0;
Step 1:opacity:1;
Hover out:-
Step 1:
opacity:0;
-
Step 1:

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;
-
Step 1:
-
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;
-
Step 1:

Demo & Examples
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.
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 2 | All updates for version 2 |
Are you a Student or a Teacher? Get a special offer now!.