General Concepts

There are several things I had to talk about it earlier, let’s talk about it in this post.

Triggers:
In the AnimatorPro v1.0 there are four triggers you can use in your animations

  • Load: if you used this trigger the animation will start when the $(document).ready fire.
  • Click: the animation will start when the current element (selected element) clicked, usually it set on buttons and icons.
  • Hover: when you hover on the current element the animation will start.
  • Scroll: when the user scroll on the page the animation will start, in this trigger you have to add more setting you’ll find it on the tail on the animation settings, we will talk about it.

Target:
The animation you’ll set will effect the target, several things must be in mind when you’re setting a target.

  • If you leave it blank, the animation will effect the selected element
  • You target is a selector, so use dot . if you target is a class, and use # if your target is an id. Ex: I want to effect this div <div class="container">...</div> I write in target .container, if it’s an ID <div id="container">...</div> I should write #container
  • If you want to effect a child inside selected tag you can use the grater than sign >. Ex: if I want to select the icon inside the div <div id="container"><a href="#"><i class="fa fa-facebook"></i></a></div> I can write something like this (if I’m setting the animation settings on the container div)  > .fa-facebook as you see it doesn’t have to be a direct child

Easing:
It’s specify the rate of change of a parameter over time, check this link.
Duration:
How many milliseconds will the animation takes.
Delay:
The delay (in milliseconds) before the animation start.
Iterations:
How many time to repeat the animation, it should be a number more than 0, you also can use infinite if you want the animation to not stop.

Init State:
Here you put the starter style for the element before the animation start.

Step (1..5):
Is the animation steps, each step will begin when the previous one end.

Add classes:
The classes you want to add when the animation finish (separate them with spaces). Ex if I want to add fade and in class I can write fade in

Remove classes:
The classes you want to remove when the animation finish.


Now we have another settings for each trigger except load trigger.

Click
You’ll noticed that there is a new section appear called SECOND CLICK it has the animation settings when the user click the second time on the button or the icon.

Hover
HOVER OUT section will appear, it has the animation settings that will effect the target or the selected element when the user hover out.

Scroll
Section SCROLL PROPERTIES will appear, it’s required for scroll trigger

  • Enable second trigger you checked it if you want the animation happened every time you scroll to the element, leave it black if you want the animation to happened just one time. Usually if you want to add animation when user scroll down (show a navbar) and another animation on the same element on scroll up (hide the navbar) you have to check it, otherwise you will have an ugly animations.
  • Scroll direction if the user scrolling down or up.
  • Scroll offset is the distance between the top of the section and the top of the browser window

    Scroll offset

Leave a comment

Your email address will not be published. Required fields are marked *