Advanced Animations (AAs) are a type of interaction that changes several elements over a series of steps.
AAs are ideal for complicated UI changes in a web app or site. For example, here we see a slider that jumps when users click its forward and rewind buttons. This was accomplished with a two-step animation: one to have the slider zip along its track, elongated to emphasize speed, and a second step to make it circular again.
Creating advanced animations
Adding an AA interaction is much like adding any basic interaction. Select an element on the canvas, then go to “Interactions” in the right-hand panel of the editor. Click “New interaction,” then select “advanced” from the “More” action list.
When you add an AA, you’ll enter Animation Edit mode, indicated by a yellow border around the working area. This mode defaults to step 1, which means any changes you make — say, revealing a hidden form — will take place when the user interacts with the trigger.
Steps, like keyframes in traditional computer animation, are the points to which elements will change. You can have up to four steps in an AA, and tweening is automatic.
Type of motion
Elements don’t have to simply move or stretch. They can also do so with a little bounce in their step.
When triggered, the off-canvas navigation above jumps into view with such enthusiasm that it has to snap back a dozen pixels. This is an example of a “back” motion that slightly overshoots its goal, then corrects its position. The other two special effect motions are elastic, which snaps back and forth several times, and bounce, which does what it sounds like.
Each element that moves in an AA can have its own type of motion per step, meaning one item can show some personality like the example above, while other items move with a certain decorum.
- Article: Web Design Trends Analyzed: 8 Effective Types of Animation
- Article: Why Simplicity Is Overrated in UX Design
- Ebooks: The Futureproof Responsive Web Design Bundle
- Get a free trial