Improve your motion

5 min readJul 26, 2018

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.

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

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.

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.

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

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:

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

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.

❤️