Important Notes

What do I need to know about Animatic?

1. Use Animatic to animate your stuff, DO NOT use Animatic to LAYOUT your CONTENT.

Some examples of layouting content (Don'ts):

  • Don't swap columns of content/text with each other,
  • Don't move content higher or lower to adjust your content spacings,
  • Don't move your logo to another location

Some examples of animating (Do's):

  • Do add hover animations to your buttons,
  • Do add fade in entrance effects to your columns,
  • Do change an image's opacity to 0.5

2. Some parameters may not work on existing elements

In some cases, some parameters such as z-index may not work with existing elements. This may have something to do with how the HTML may have been structured or what CSS rules have been applied to the element.

But don't worry, create an Animatic Images gallery (see an earlier section about this), then animate that, everything should work fine.

3. Since Animatic does not modify your content, animations may disappear when you modify your content

When adding animations, Animatic tries to find out the best way to find a unique identifier for the element you selected.. similar to CSS & jQuery selectors. This indentifier/selector is used to apply the animation to the element. When Animatic cannot find the best unique identifier, it uses the element's parent structure (if it cannot find a unique identifier you will see a red notice icon on the bottom of the Animatic panel).

Since the generated selector is built on the element's parents, modifying the animated element's location would make the selector invalid and the animation won't be applied.

To fix this, add an id attribute along with a unique name to the element itself or its immediate parent. This fix is also described in the Animatic panel.

3. Entrance and Hover Animations doesn't work in Mobile Browsers.

Due to fact that mobile browsers doesn't support scrolling and hover behaviors, Entrance and Hover Animations isn't supported for mobile.