Transitions

Learn web transitions easily in this blog. From CSS basics to practical examples, discover how to make smooth animations. Try hands-on examples in Framer Motion. Elevate your web skills and have fun transitioning!

Intro

Last time, we talked about animations, exploring the ways framer-motion animates elements. Today, our focus shifts towards the art of transitions—the connection between two values and the exploration of possibilities that transitions bring to the table. Whether you're a seasoned frontend developer or just starting with animations, I'll try to simplify things for everyone's understanding.

Meaning

First, let's begin by looking into a dictionary to find out what the word "transition" even mean:

Movement, passage, or change from one position, state, stage, subject, concept, etc., to another; change:

From this definition, we can see that the transition describes a change between two states, or in CSS terms, between two values. To break it down, if we change a value in CSS by default we don’t see any movement (transition). Instead our changing element just jumps to the new state. That’s because browsers don't know how to smoothly connect those values. To change that, we need to decide what we want to transition and how long the transition takes.

For instance, we can change the width of an element, and the transition will generate all the frames in between. As mentioned earlier, we have to set a time interval. The time decides how long the transition lasts and how many frames come between our two values.

Transition effect.gif

Up until this point, every aspect of the transition has been straightforward. We've covered the property which is transitioning, and the time which determines how long the transition takes. Now, we stumbled upon the timing function, the most abstract term of them all.

Bezier curve

We can't talk about the timing function without mentioning the bezier curve. If you've ever used the pen tool in Adobe Illustrator or Figma, you know what a bezier curve is. Developed in France by Pierre Bézier for designing curved lines in Renault cars, it now helps countless designers in creating various shapes for the IT industry. In our case, it determines how the transition is applied. In other words, a transition doesn't have to be linear, it can slow down or speed up in the beginning, middle, or end of the transition. This directly affects the feel of the animation, and it can be a crucial aspect of the visual identity.

Now that we know more about the timing function and its origin, we can try to visualize all the talk. There’s a pretty useful online tool where you can do exactly that.

Bezier curve.gif

Here, you can modify your Bezier curve, and by pressing the "Go" button, you will see the effect on the transition. While you can use predefined values like ease, ease-in,linear, etc., you can also create your own curve. This tool is amazing for fine-tuning your timing function to precisely meet your needs.

Bezier curve preview.gif

Another accepted value for the transition property is delay, but that one is pretty obvious. It indicates the time the transition waits to start.

CSS implementation

Alright, now that we've introduced all the transition properties, let's dive into how to implement them into our CSS code. First, let's list all the possible properties that a transition can accept.

• transition-property

• transition-duration

• transition-timing-function

• transition-delay

Of the four properties, only two are mandatory: "property" and "duration." Also, we don't have to separate those values individually; we can use a shorthand for them. For example:

Transition property.jpg

There are two other common uses for transitions, applying different transition effects to separate properties. This is achieved by using comma separation, like this:

transition: width 250ms ease, color 100ms ease-out 150ms;

A second scenario occurs when we need the same transition effect for all CSS properties. To achieve this, we can use the value "all," applying the transition to every property:

transition: all 250ms cubic-bezier(0.3,0.1,0.19,0.96);

From the example above, we can see that besides the timing-function keywords like ease, ease-in, linear, we can also use the "cubic-bezier" function, which takes 4 parameters to describe our bezier curve that we talked about earlier.

After getting a good dose of theory, let's roll up our sleeves and play with an example. That’s always the best way to learn so give it a try.

(There is transitionValue variable in App.tsx file where you can change transition value and see the effect on the example below)

Framer motion transitions

Because I really enjoy framer-motion, I can't help but talk about some of its magical transition features. When we animate elements in framer-motion, we can choose from two main types of transitions: tween and spring.

The tween type is similar to CSS transitions but offers a wider palette of timing function values like circIn, backIn, anticipate.

Spring introduces a cool way to approach transitions, using a bouncy effect inspired by spring movement. We can choose between two approach of configuring a bounce effect:

Duration and bounce

If you want a bounce effect with a set duration and don't want to mess with too many settings, you can use these two properties. They help you set how long the transition lasts and how strong the bounce is. A value of 0 means no bounce, while 1 means it's super bouncy. The duration is in seconds; for instance, 0.4 equals 400 milliseconds.

Stiffness, damping and mass

On the flip side, if you want to fine-tune your bounce very precisely, this method might be more fitting for you. You can tweak a few options this way.

Stiffness takes a number and shows the strength of our metaphorical spring. The default value is 100, and increasing it makes the movement quicker.

Damping can be compared to gravity, at least in my view, but it represents the opposite force. Set it to zero, and the spring will bounce infinitely. The default value is 10, which mimics close-to-natural bouncing behavior.

Mass is the last property representing the heaviness of the transitioning element. A higher mass leads to slower movement with more inertia, and a smaller mass moves quicker. The default value is 1.

useSpring.gif

As we know, learning is easier with examples. Here's an example of different framer-motion transitions, and you can experiment with settings like stiffness, damping, mass, and bounce.

Conclusion

To wrap it up, I hope you learned something new today. So, when the time comes to animate an element from one state to another, you now have a good idea what steps to take and which tools to use. The cubic-bezier function is amazing for adding a unique touch to your visual style. It's a great way to stand out from the other developers, I'll admit, I often use an “ease” too. So learn from my mistakes and I wish you happy transitioning!