Fluid Animations

This is a bit of a ramble about …

movement,

different types of transitions

and animation on screens.

Disclaimer

This is an interactive story that will take about 5 minutes of your precious time. At the bottom of your screen, you will see a progress bar to indicate – you guessed it – your progress. Have fun scrolling!

by Aaron Nossek

You know what really bugs me sometimes?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

I researched a bit on different types of movement and animation on screens ...

... and found some quite interesting things.

Let me show you!

Notice a difference?

Each square follows the same path
but in a different kind of manner.

play

play

This may not be the best example
so let me show some more examples!

Now in a different context.

play

play

Now in a different context.

play

play

Although it’s the same movement in the same amount of time, it feels different. But why?

What makes the first animation so satisfying to watch and the other one quite bland?

Let us take a step backwards and see how these movements are defined.

example A

example A

They follow the curve – very important.

The curve defines the movement. The bottom axis is the time. With time as our input, we can alter how the square position is influenced by the time. the curve helps us with this. It makes it possible to make the speeding up and slowing down smoother. The resulting progress is visible on the left axis.

Different types of the curve:

smooth boiii

the classic

ramping

You can also think outside the box.

bouncy one

And for those of you familiar with After Effects:

just pressed F9

From our earlier example: (A) is defined by a smooth curve and (B) is defined by a linear one.

example A

example A

Now, why exactly does animation (A) feel so much better?

You may know that there are some »beauty rules«. For example, The Golden Ratio can be found in nature and artists use this ratio to make things look good to our eyes. Some plants animals have features that grow in these proportions. Through evolution, they now look natural to us.

The same can be said for movement. So they are similar to reality and reflect real movement – only robots move in a linear fashion. Sure, those have their use cases, but most of the time we would like to see that smooth curve because it feels right for us.

delete this section?

Now that we know the why it’s time to try out a few things. Why don’t you have a go at it?

See how different curves make the movement feel different!

Play with the curve and see the animation change.

Thank you, next? Why is this information useful to me?

Different techniques can imply different meanings, maybe you can take notice of that in the future. Maybe there is a hidden message, maybe some hint to something bigger, the creator of the content you are watching doesn’t want you to know right away.

Look out for it the next time you watch an animation!

Okay, that’s probably enough animation-induced conspiracy for now.

If you are interested in me and my work, you can visit my website aaronnossek.com and look at my photography on Instagram @aaronnossek.

I still got a little something for those who want to create that smooth look themselves. Otherwise, that’s it for now.

Some directions for you to get that smooth look yourself:

After Effects

Select your keyframes and press F9.

That automatically adds ease to these keyframes. You can go into the curves editor and ease the movement even more to get that ooze. By switching to the speed graph, rather than the value graph, you can really dive deep into the movement of your creation and make it your own!

CSS coding

If you have an element that dynamically changes a parameter, add the magical line of code:

‍transition: 0.4s ease;

0.4s defines the length and ease defines the type of smoothing. Visit the w3schools.com guide to see what other parameters you can use in there.

For more control, you can visit cubic-bezier.com to create and preview your own curves if the classic ease doesn’t cut it.

Frame By Frame Animation

Draw more frames at the start and at the end of your movement.

Drawing in more frames towards start and end imitates the effect of easing in computer software. Searching for terms such as »smooth frame by frame animation« on YouTube you will probably find a tutorial that fits your needs.

Go back to all projects