Post Image

Advanced Animations

Ben Gremillion
By Ben Gremillion on 1st July, 2016 Updated on 7th August, 2018

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.

These are advanced animations

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.

Create an advanced animation

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.

Advanced animation controls

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.

Elements can move, stretch, bounce, and more

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.

Ask a question

< User Guide table of contents

Ben Gremillion

by Ben Gremillion

Ben Gremillion is a Content Strategist at UXPin. He’s worked as both a web designer and a back-end developer. On the side he builds and maintains a CMS for webcomic artists, and participates in annual NaNoWriMo challenges.

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you