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
Austin Saylor runs his motion design company that does work for clients, teaches students how to do lettering animation and has a membership for motion designers to help them embrace fun and make profit in the mograph world. He loves skateboarding, udon noodles and reads way too many non-fiction books. Check out more of his work at AustinSaylor.com.
