How to Use - Animatic

How to Use the Animatic plugin?

This is a simple guide for beginner users of Animatic Advanced WordPress Frontend Animator.


How to Use

You can use Animatic in 2 ways:
  1. Create new complex animations, and
  2. Animate your existing elements

How to Use: Create New Animations

If you are using Visual Composer, we have also added in a Visual Composer Animatic Element to make your life easier :)

To make things easier, we have integrated inside the Media Manager window and within WordPress' gallery creation process.

To create complex animations, first edit one of your pages/posts. Once editing, you'll need to add an animation area along with images to animate. Click on the Add Media button:

When the Media Manager opens up, click on the Create Gallery tab on the left hand side:

Now select your images then click on the Create a new gallery button. Your Media Manager will now show you your gallery settings. You should see a new drop down option in your gallery settings to choose the Gallery Type, select Animatic Images and options relevant to Animatic should appear:

After selecting the drop down, click on the Insert gallery button, then you should see a preview of the images you have selected inside your content editor:

At this point, your images aren't animating yet. We just created an area where we can place your images in.

Now Update your page (or save it as draft), then view your page so we can start animating.


How to Use: Animate your Existing Stuff

To animate your stuff, go and visit the frontend of your site and navigate towards the page you want to add animations to. Also, make sure that your admin bar is enabled in your admin settings.

While inside your page, click on the Edit Animations button on your admin bar, this will enable editing mode:

While in editing mode, a new bottom panel will appear in your frontend, we call this the Animatic Panel. This area contains the various settings that you can change in order to animate your elements. You can find more details of the whole Animatic Panel in a later section.

Click an element to start animating it. When you click on an element, the selected element will have a blue border on it, and a DOM tree that enumerates it's parents will be placed on the bottom of the Animatic Panel:

You'll see the Animatic Panel after you select an element:

You can change the default location, add rotations, animations, entrance and hover animations for your element. Your changes will be saved after a few seconds.

For more information about the panel, click here.