Improve your motion

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.

// Transition
.element
transition .32 ease-in-out

// Animation + Keyframes
@keyframes basicMotion
1%, 100%
transform translateX(0)

50%
transform translateX(100px)
.element
animation basicMotion .4s ease-in-out infinite

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 .

// Transition
.element
transition-delay 0
transition-duration .32s
transition-property all
transition-timing-function ease-in-out

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.

// Animation + Keyframes
@keyframes basicMotion
1%, 100%
transform translateX(0)

50%
transform translateX(100px)
.element
animation-name basicMotion
animation-duration .4s
animation-timing-function ease-in-out
animation-iteration-count infinite
animation-delay 0

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.

.cards--active 
.cards
&__item
&-title, &-text, &-figure
transform translateY(0)
opacity 1
transition-timing-function cubic-bezier(0.9, 0.01, 0.25, 1)
      &-figure
transition-delay 0.27s

&-title
transition-delay 0.35s
      &-text
transition-delay 0.43s
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

.cards--active 
.cards
&__item
&-title, &-text, &-figure
transform translateY(0)
opacity 1
transition-timing-function cubic-bezier(0.9, 0.01, 0.25, 1)
      &-figure
transition-duration 0.4699s

&-title
transition-duration 0.5698s
      &-text
transition-duration 0.6697s

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.

// define var
$ease = cubic-bezier(0.77, 0.03, 0.19, 1)
// define function
getDuration(i, start=.09)
(.32 + ( i * start ))s

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.

.days
width 100%
display flex
overflow hidden
padding 5em 6em 0 7em
  &__item
list-style none
width 85%
flex-shrink 0
display block
  &-enter
&-active
& ^[0]__item
for i in (1..3)
&:nth-child({i})
transition getDuration(i, .09) $ease
    & ^[0]__item
transform translateY(35px)
opacity 0
    &-to
& ^[0]__item
transform translateY(0px)
opacity 1
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.

&-enter, &-appear
&-active
& ^[0]__item
transition-delay .32s
transition-timing-function $ease
will-change transform, opacity
backface-visibility hidden
transform-style preserve-3d
      for i in (1..4)
&:nth-child({i})
transition-duration getDuration(i)
  & ^[0]__item
transform translateY(40px)
opacity 0
  &-to
& ^[0]__item
transform translateY(0)
opacity 1

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.

will-change: transform, opacity;
backface-visibility: hidden;
transform-style: preserve-3d;

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.

❤️