Improve your motion

Erick Leopoldo
Jul 26, 2018 · 5 min read

If you are a front-end developer you spend a lot of time researching and trying to understand how motion works and questioning yourself what is the best technique to improve your transitions and show the content in the most fluid way to the user.

What is motion?

Motion is the action or process of moving. At websites, a motion is present in transitions when you return a callback to the user, when he clicks something, place the mouse over an element or when a change occurs on the page.

Motion in CSS?

In CSS you can build motion effects by using some properties like transition and animation with keyframes.

These two properties have some “sub-properties”, which can help us modify our animations and have better control over them.

Transition

The transition is a property that you can use to add motion in an element when you add a new class and/or control the interactions :focus :hover :active .

Animation

The animation is another property that allows you to create incredible interactions in your application, by the way, this property needs a keyframe, that is like a timeline, to control your motion.

How to improve your motion?

When thinking about how to show feedback and delivering the best experience to your users you need to know about some parameters.

All the content you will show needs to be sweet, fluid and scalable.

scalable delay

To achieve a visual effect like the gif above you would probably choose to use the property transition-delay, fine-tuning the value to find the perfect set.

Card example using delay

Show the content step by step is a very useful technique and guess what?! You can make it even better by using the transition-duration property instead of transition-delay.

Based on concepts of motion, changing transition-delay to transition-duration gives you a better control over your transitions making all things look more fluid and sweet.

Difference between duration and delay.
Understanding the difference using the inspect animation.

The same card using duration

Advanced example

Using duration you can take your motion to the next level.

First, let’s store the transition-timing-function property in a variable, so we can reuse it, then we create a function, which returns a custom duration, and we can also reuse it. I’m using Stylus pre-processor in the examples.

The getDuration() function takes two arguments, the first one is the item position and second is the time (in milliseconds) to control the speed in our motion.

Let’s suppose we have the layout below and we need to add a motion effect when the content appears in the screen. The first thing we gotta do is to think about every element in the screen as a separate block (like the image below), as you would when creating components in your daily tasks.

Layout example
Layout example with imaginary lines

It’s very easy to use our function in the code to create the desired motion effect.

Example first list

You may have asked yourself: “what about the delay?”

We’ll use it to create a fluid “entrance” effect, so every element will enter the screen at different points in our animation timeline.

In this case, we delay the element animation and create a fluid motion too.

An important tip if you have a lot of different animations and need to care about rendering performance and frames per second, you can use the properties below.

The result:

Example with delay and duration

In the end, our simple property change helped us to achieve a fluid and performative visual effect.

Final example
Hover example

You can see a full demo and the code in the links below.

________________
| DEMO | CODE |

If you enjoyed the reading or have any question, comment below or send me an e-mail erick@leopoldo.me.

❤️