Tutorial: These tiny tweaks make your animations so much better

4 min read
Austin Saylor
  •  Jan 24, 2019
Link copied to clipboard

What takes a product animation from good to great? Really, it’s all about the small details.

Using InVision Studio, let’s take a look at a few tiny tweaks that can make your animations so much better. For those who prefer reading to watching, get the summary below the video.

For me, a solid animation must be smooth and snappy. InVision Studio automatically does both of these things any time you add an animation by defaulting to 0.3 seconds and setting a nice, soft S-curve. What we don’t want is for it to be a linear curve, which is what most animation programs default to.

Now that we have a smooth and snappy animation, let’s dive into those tiny tweaks that’ll make it even better.

1. Parallax

We start with a sliding animation that has no parallax. It gets the job done, but let’s make it stronger. Creating parallax in Studio is quite easy.

1. Start with images that are portrait (wide) format. That way, you have room to move it left and right.

2. Move the image (inside a mask) further left or right than the window you’re looking through.

3. Make sure you move the images approximately the same distance so it feels consistent.

2. Unconventional parallax

For an unconventional parallax “scroll,” we’re going to do things differently. In this example, the UI is set up similarly, but instead of moving the mask/window left and right, we’re going to do the following:

1. Fade the images in/out and scale them both down at the same time

2. Animate separate icons off by moving them outward beyond the mask

3. The new icons are delayed a little and come in from off the edges

3. Add rotation and angular motion

This tiny tweak adds on to the previous one. All you need to do is add a bit of rotation to the icons when they move in and out of the mask. And adding just a bit of an angle so they don’t slide in perfectly left and right, up and down, you’ll get a much more organic feel to the movement.

Take this opportunity to think about how some of your icons would move in real life. For instance, the beach ball is animated with extra rotation in the direction it would roll in real life.

I encourage you to jump into Studio yourself and try these out for your app, website, or product. It’s going to make all the difference.

Read more about motion design

  • How I learned—and mastered—the fundamentals of motion design
  • Meet the illustrator behind Duolingo’s crying owl
  • 10 microinteractions that will inspire your next project
  • Collaborate in real time on a digital whiteboard