Web Animations

Introduction to Web Animations

Web animations lets you gradually change an element from one style to another through a series of effects. They are useful for adding eye catching visual content to your site, making mouseover effects appear more responsive and can highlight certain areas of your page. Currently there are three types of Web Animations, this article gives you a breif overview of all of them.

As the name descibes, animations that occur when you either click something or hover your mouseover something. This also applies to pop-up layers and is handy for things like highlighting buttons on NavBars, context tips when hovering over images and giving an overall interactive feel to your website.

More Information

Reveal Animations are objects that appear, or animate into your page once they appear within view of the browser. They help highlight points and give a sleek look within your page as users will be drawn to the visual changes.

More Information

For version 12 we've introduced the new paralax and scroll animations. Scroll anismations are animations that are in-sync with your scroll, so they happen as you scroll, and parallax animation when whilst your scroll, the background images move slower than the foreground objects giving the illusion of depth and adding to the immersion of your website.

More Information

Animation Compatibility

Some objects can be made to animate but others can't unfortunately due to technical reasons. Please see the table below for a comparison as to what is compatible with each other.

Object TypeReveal AnimationsMouse-over/Click AnimationsScroll/Parallax Animations
Text Yes Yes Yes
Images (Including Groups) Yes Yes Yes
Placeholders / Widgets Yes No No
Text Panels Yes No No
Soft Groups Yes Yes Yes
Stickies Yes Yes Yes
Full Width / Height No No No
Page Background Layer Objects No No No
Pasteboard Background Layer Objects No No No
Reveal Object Animations N/A No No
Navigation Bars Yes Yes Yes
Objects on Pop-up Layers Yes Yes Yes
(6 vote(s))
Not helpful