Animate like Flash but in a cool way

Under today’s standards, web applications not only need to be fast and look cool, but they also need to give the feeling of being alive, and this latter is quite hard to manage well. With CSS becoming super powerful, new ideas and concepts were introduced, like animations, which can provide the user with unforgettable experiences when done well.

Animations in CSS are a beast, and people are doing amazing things with it, like animated art, don’t believe me? check out this Alpaca built by CSS ninja Annie (@anniebombanie_ )

Perhaps you don’t need that level of complexity for your web app, but having a good understanding of CSS and animations can be crucial to building the web experiences of the future.

In this article, we will cover some of the top React animation libraries, and it will serve as an introduction to a collection of posts that will focus on making beautiful web products.

---

Understanding Animations

Animations in CSS are the gradual change of properties over a period of time.

CSS comes with already built-in animations, but it allows you to do much more with keyframes. Keyframes allow setting points in time during the transition where CSS properties are assigned different values—giving you the option to customize how the elements evolve over time.

---

Traditional CSS Animation

The core of animations is CSS, so it’s no surprise that one possibility to build animated React apps is not by using a JS framework, but with the use of CSS instead.

Like we explained before, we can define CSS animations using keyframes. Let’s see an example of that:

@keyframes ball-bounce {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-200px); }
    100% { transform: translateY(0); }
}

In this example, we create a bouncing effect by translating an element from a given position -200px and then returning to the original position.

The percentages indicate at which moment of the animation the values will reach the desired value. You may wonder why we define those in percentages and not seconds or any other unit of time. At this point, we only created an animation, but it still needs to be applied, and it is when we apply the animation to an element that we provide the duration of it, among other properties. This gives you much more control as you can reuse animations in different elements with different durations; cool, right?

Enough talks, let’s apply this animation to an element. To do that, we make use of some CSS properties:

• animation-name: this refers to our animation and must match the name given to the keyframes.
• animation-duration: defines how long the animation lasts.
• animation-delay: delays the beginning of animation for a specified duration.
• animation-iteration-count: specifies how many times animation happens. Specifying infinite never end the animation.

You can read more about these properties and more in w3schools: CSS animations .

Let’s see how we can apply our example to an element:

.ball {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background-color: #EB333D;
    animation-name: ball-bounce;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-delay: 2s;
    animation-direction: alternate;
}

Pretty easy, right? Let’s see it all together in action:

---

React Spring

While animation using CSS is very common, we can create complex animations using libraries like React Spring. React Spring comes with very powerful transitions, spring, trails, and supports React Hooks and React JS class components.

When building animations using JavaScript, frameworks, and libraries will usually delegate the control flow of the animation to JavaScript while using CSS to make the transformations.

This has big advantages as the animation can be dynamic and evolve by simply changing the code or controlling it with the full power of JavaScript, but it also has some drawbacks as you may guess.

React Spring is a perfect example of this type of implementation, and what better way to explain it than with an example:

const animation = useSpring({
    from: {transform: 'translateY(0px)' },
    to: async next => {
        while (true) {
            await next({transform: 'translateY(-200px)'});
            await next({transform: 'translateY(0px)'});
        }
    }
});

The example is the same animation we built using CSS and keyframes, but this time we use React Spring and JavaScript to control the flow of the animation.

We start by providing a from property with the CSS of our initial state, and then we have a to property with our final values. What’s very interesting is that the to state can be a function, and inside such a function, we can build multiple steps or have an endless loop animation as is our case.

This approach allows us to build any animation possible with keyframes as much more, leveraging the power of JavaScript to do so.

Let’s now see how our full example would look like:

To use React Spring on your projects simply run

npm i react-spring

And check the react spring official docs

---

Framer Motion

Framer Motion works in a very similar way to React Spring, in fact, React Spring was based on the design of Framer Motion. However, there are some differences. Framer Motion prefers a more declarative approach for defining transitions, everything can be simply done by tunning properties on an animation object.

Let’s see our example, now using the amazing library:

<motion.div transition={{
      y: {
          duration: 1,
          yoyo: Infinity,  
          ease: "easeIn",
      }
    }}
    animate={{ y: ["0px", "-200px"] }}>
    <div className="ball"></div>
</motion.div>

Our animation object expects 2 properties, an animation that defines the changes in the properties, and a transition object that defines how those properties change.

It really is that simple, let’s see how our full example would look like:

To use Framer Motion on your projects simply run

npm i framer-motion

And check the react spring official docs

---

Conclusion

The web used to be this boring, but now web applications are a delight and animations play a crucial role in it. When done well they can enhance the user experience, however, don’t abuse it, too many of them and it can actually hurt UX.

With the importance of animations, React needed solid solutions to keep web applications on top of the trend, and today we listed a few ways you can make your application stand out by animating its components.

My only intention today was to introduce the topic and some approaches to hopefully ignite your curiosity to learn more about it and build your own animations. If you build something cool, please let me know on twitter @bajcmartinez , I’d love to see what amazing things you can all build.

Source: livecodestream