The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing
Categories We Write About

Creating Looping Animation with Custom Easing Curves

Written by

Bernardo Palos

in

Creating looping animations with custom easing curves is an effective way to bring life to web designs, user interfaces, or even interactive art. Custom easing curves help control the speed and timing of your animation, allowing you to create smooth, natural motion. In this article, we’ll explore how to create looping animations with custom easing curves using CSS and JavaScript, while discussing the theory behind easing functions and practical techniques to implement them.

Understanding Easing Curves

Easing functions describe how the speed of an animation changes over time. By default, most animations use a linear easing curve, where the animation progresses at a constant speed. Custom easing curves give you more control over how the animation accelerates and decelerates.

Easing functions are often defined by cubic Bézier curves. The cubic Bézier curve is a mathematical curve defined by four points, which can create different types of acceleration or deceleration effects. Common easing functions include:

  • Ease In: The animation starts slow and speeds up toward the end.

  • Ease Out: The animation starts fast and slows down at the end.

  • Ease In Out: The animation starts slow, speeds up in the middle, and slows down at the end.

  • Linear: Constant speed throughout the animation.

Custom easing curves allow you to define your own type of motion by adjusting the control points of the Bézier curve.

Step 1: Setting Up the HTML Structure

Let’s start by setting up the basic HTML structure for our animation. In this case, we’ll animate a square that moves from left to right in a loop.

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Looping Animation with Custom Easing</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="box"></div>
</body>
</html>

The <div> with the class box will be the element we animate.

Step 2: Writing the CSS for the Animation

In the CSS file (styles.css), we will define the animation and apply a custom easing curve.

css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.box {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    animation: moveBox 5s infinite cubic-bezier(0.25, 0.1, 0.25, 1);
}

@keyframes moveBox {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(300px);
    }
    100% {
        transform: translateX(0);
    }
}

In the @keyframes rule, we define the motion of the box. It starts at its original position (0%), moves 300px to the right (50%), and then returns to its starting position (100%).

The cubic-bezier(0.25, 0.1, 0.25, 1) easing function controls the speed of the animation. You can tweak the control points to create different effects. The values 0.25, 0.1, 0.25, 1 produce a smooth, natural-looking ease-in-out effect. If you want to experiment with other curves, you can adjust these numbers or use online tools like cubic-bezier.com to visualize the curve.

Step 3: Making the Animation Loop

To make the animation loop indefinitely, we’ve used the infinite keyword in the animation property. This causes the animation to repeat without stopping.

Additionally, the 5s value specifies the duration of one loop. You can adjust this based on how fast or slow you want the animation to be.

Step 4: Experimenting with Custom Easing Functions

One of the most powerful aspects of easing curves is the ability to create unique motions. Here are a few custom cubic Bézier examples you can try:

  • Elastic Effect: cubic-bezier(0.25, 1, 0.5, 1)

    This curve gives an elastic, bouncing motion at the start and end of the animation.

  • Overshoot Effect: cubic-bezier(0.42, 0, 0.58, 1)

    This curve gives a more exaggerated, overshooting effect. The box moves past its destination and then bounces back.

  • Snappy Effect: cubic-bezier(0.42, 0, 0.58, 1)

    A quick start and slow finish creates a snappy, punchy movement.

You can experiment with these curves by swapping them in the animation property.

Step 5: Adding More Advanced Customization with JavaScript

While CSS animations are great for simple effects, you can enhance your looping animations with JavaScript. For instance, you might want to trigger different animations based on user input, or apply more advanced physics-based easing.

Here’s an example of how you might use JavaScript to trigger the animation with custom easing curves dynamically:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Easing Curves</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        
        .box {
            width: 100px;
            height: 100px;
            background-color: #3498db;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        const box = document.querySelector('.box');
        
        function animateBox(easingCurve) {
            box.style.animation = `moveBox 5s infinite ${easingCurve}`;
        }

        // Trigger with different easing functions
        animateBox('cubic-bezier(0.25, 0.1, 0.25, 1)');  // ease-in-out

        setTimeout(() => {
            animateBox('cubic-bezier(0.25, 1, 0.5, 1)');  // Elastic effect
        }, 5000);
    </script>
</body>
</html>

In this example, the animateBox function lets you dynamically change the easing curve by modifying the animation property of the .box. You can trigger animations with different easing functions based on user actions or time-based events.

Step 6: Performance Considerations

When working with looping animations, especially with complex easing curves, performance is important. The more complex the animation, the higher the CPU/GPU demand. Here are a few tips for improving performance:

  • Use Transform and Opacity: Animating transform and opacity properties generally performs better than animating properties like width, height, or left.

  • Avoid Repainting and Reflowing: Be mindful of the properties you animate. Properties like left or top can trigger layout recalculations, which can be performance-intensive.

  • Hardware Acceleration: Use will-change: transform; on elements you plan to animate to hint the browser that these elements will undergo frequent changes.

Conclusion

By using custom easing curves in your looping animations, you can create smooth, realistic motions that bring your designs to life. Whether you’re working with CSS or JavaScript, easing functions offer immense flexibility in controlling animation timing and effects. With just a few tweaks, you can experiment with different behaviors, from elastic and bouncy effects to smooth, natural transitions.

Mastering easing curves is a key part of making your animations feel responsive and engaging, and by combining these techniques with performance best practices, you can ensure a smooth experience for your users.

Share this Page your favorite way: Click any app below to share.
See all the ways to share this page

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Check Out Our Newest Posts we wrote about

Categories We Write About