The Palos Publishing Company

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

How to Handle Animation Playback Speed Dynamically

Written by

Bernardo Palos

in

Handling animation playback speed dynamically can add a layer of interactivity and flexibility to animations in a variety of contexts, such as web development, games, and interactive applications. By adjusting the playback speed of an animation in real-time, users can experience a more immersive or adaptive interaction with the content. Below are the strategies you can use for handling animation playback speed dynamically, with examples that can be applied to different environments, such as CSS animations, JavaScript-driven animations, or even game engines.

1. Using CSS Transitions and Keyframes

In CSS, the speed of animations is usually controlled through the animation-duration property. However, making this speed dynamic requires updating the property value in response to user interactions or other triggers.

Example: Changing Animation Speed with CSS Variables

One efficient way to make animation speed dynamic in CSS is by using CSS variables. This allows you to control the speed of animations based on user input or other events without modifying the core stylesheets.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic Animation Speed</title>
  <style>
    :root {
      --animation-speed: 3s;
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      animation: move  var(--animation-speed) infinite alternate;
    }

    @keyframes move {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(300px);
      }
    }
  </style>
</head>
<body>

  <div class="box"></div>
  <input type="range" id="speedControl" min="1" max="10" step="1" value="3">
  <script>
    const speedControl = document.getElementById('speedControl');
    speedControl.addEventListener('input', (e) => {
      document.documentElement.style.setProperty('--animation-speed', `${e.target.value}s`);
    });
  </script>

</body>
</html>

In this example, the animation speed is dynamically controlled by a range input. As the user adjusts the slider, the --animation-speed CSS variable is updated, which in turn adjusts the speed of the animation.

2. JavaScript with Web Animations API

The Web Animations API provides greater control over animations and allows you to modify properties like playback rate dynamically. This is particularly useful when building more interactive web applications.

Example: Changing Animation Speed with Web Animations API

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic Animation Speed</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>

  <div class="box"></div>
  <input type="range" id="speedControl" min="0.1" max="3" step="0.1" value="1">
  
  <script>
    const box = document.querySelector('.box');
    const speedControl = document.getElementById('speedControl');
    
    const animation = box.animate([
      { transform: 'translateX(0)' },
      { transform: 'translateX(300px)' }
    ], {
      duration: 1000,
      iterations: Infinity
    });

    speedControl.addEventListener('input', (e) => {
      const speed = e.target.value;
      animation.updatePlaybackRate(parseFloat(speed));
    });
  </script>

</body>
</html>

In this example, the animate method is used to create a simple animation, and the playback speed is adjusted using the updatePlaybackRate method based on the input slider. The playback rate can be dynamically adjusted between 0.1x and 3x the normal speed.

3. JavaScript with RequestAnimationFrame

For more complex animations, such as games or custom visualizations, requestAnimationFrame is often used. This allows for precise control over animations and the ability to modify playback speed in real time.

Example: Dynamic Speed with requestAnimationFrame

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic Animation Speed</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
    }
  </style>
</head>
<body>

  <div class="box"></div>
  <input type="range" id="speedControl" min="0.1" max="3" step="0.1" value="1">

  <script>
    const box = document.querySelector('.box');
    const speedControl = document.getElementById('speedControl');

    let speed = 1;
    let xPos = 0;
    let lastTime = 0;

    function animate(time) {
      const deltaTime = time - lastTime;
      lastTime = time;
      xPos += speed * deltaTime / 10; // Speed scale factor
      box.style.transform = `translateX(${xPos}px)`;

      if (xPos < window.innerWidth) {
        requestAnimationFrame(animate);
      }
    }

    speedControl.addEventListener('input', (e) => {
      speed = parseFloat(e.target.value);
    });

    requestAnimationFrame(animate);
  </script>

</body>
</html>

In this case, the animation is manually controlled by adjusting xPos and using requestAnimationFrame to create a smooth animation. The playback speed is determined by adjusting the speed variable, which is updated through the range input.

4. Using Three.js for 3D Animations

For 3D animations in WebGL, the Three.js library offers robust controls, including the ability to adjust animation speeds dynamically. This is especially useful in gaming, interactive media, and simulations.

Example: Changing Animation Speed with Three.js

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Three.js Dynamic Animation Speed</title>
  <style>
    body { margin: 0; }
    canvas { display: block; }
  </style>
</head>
<body>

  <input type="range" id="speedControl" min="0.1" max="2" step="0.1" value="1">
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script>
    let scene, camera, renderer, cube;
    let clock = new THREE.Clock();
    let speed = 1;

    // Set up the scene
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // Create a cube
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 5;

    function animate() {
      const delta = clock.getDelta();
      cube.rotation.x += speed * delta;
      cube.rotation.y += speed * delta;

      renderer.render(scene, camera);
      requestAnimationFrame(animate);
    }

    // Update speed on input change
    document.getElementById('speedControl').addEventListener('input', (e) => {
      speed = parseFloat(e.target.value);
    });

    animate();
  </script>

</body>
</html>

In this Three.js example, the speed of the cube’s rotation is dynamically adjusted using an input slider. The rotation speed is modified by the speed variable, which is updated in real time through the user’s input.

5. Adjusting Speed in Game Engines

In game engines like Unity or Unreal, the playback speed of animations can be adjusted through the animation system. Typically, this is done by manipulating the time scale or adjusting the speed of the animation clip at runtime.

Example: Unity (C#)

csharp
using UnityEngine;

public class DynamicSpeed : MonoBehaviour
{
    public Animator animator;
    public float speed = 1f;

    void Update()
    {
        animator.speed = speed;

        // Update speed dynamically based on user input (e.g., using the mouse wheel)
        if (Input.GetAxis("Mouse ScrollWheel") > 0f)
        {
            speed += 0.1f;
        }
        if (Input.GetAxis("Mouse ScrollWheel") < 0f)
        {
            speed -= 0.1f;
        }
    }
}

This Unity script dynamically adjusts the playback speed of an animation using the Animator.speed property, with user input (like the mouse scroll wheel) controlling the speed.

Conclusion

Dynamically handling animation playback speed involves using the appropriate tools based on the

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