Animate Elements Inside Carousel

Hi again, this is the new feature of the AnimatorPro 1.1, with it you’ll be able to animate elements inside Bootstrap Carousel and tabs, in fact you’ll be able to animate element inside any library or plugin that uses jQuery to add class when something happen (in carouse plugin active class added to the slide when it shown).

Let’s start, after activating v 1.1, you’ll notice that there is new trigger (Class Added) added to the trigger list.

Now select the slide (the main container of elements), shown in the bellow image.

Carousel Slide

Now if you go to the ACT panel, you’ll see that the trigger is set to Class Added, and the target is > h1 and that mean we’re targeting the heading inside this slide. Now under the ANIMATION STEPS the init state is set to transform:translateY(20px);opacity:0; and step 1 to transform:translateY(0px);opacity:1;, again under the ANIMATION ADDED/REMOVED PROPERTIES you’ll find the Class name field, with this field you can change the class that will added/removed to the container (active is the default value), as we said the carousel plugin adding/removing active class to the container after the slide show, so the animation will start when the slide show.

Finally under the CLASS REMOVED section you can remove the animation you did before, so the user will see the animation every time slide show (as we did in the template), if you didn’t reset the animation, the element will animated only one time.

Leave a comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.