Unlock the Power of Smooth Animations with Motion One

Motion One is a game-changing library that enables you to add stunning, buttery-smooth animations to your website with ease. By leveraging the Web Animations API, Motion One provides a lightweight and efficient way to bring your website to life.

What Makes Motion One So Special?

With a tiny bundle size of just 3.8kB, Motion One is a fraction of the size of other popular animation libraries. Plus, its core function, the animate() API, can operate independently of the main JavaScript thread, ensuring seamless animations even during heavy application renders.

Getting Started with Motion One

To begin, install the library and dive into the animate() API, which takes three parameters: a CSS selector, animatable values, and options. The animate() function can be triggered using an onClick event bound to a button, making it easy to create interactive animations.

// Example usage
animate('.selector', { opacity: 1 }, { duration: 0.5 });

Creating Interactive Animations

Let’s put Motion One to the test by recreating an animation inspired by GitHub’s contributors list. We’ll use Tailwind CSS to speed up development, but the concept remains the same with vanilla CSS. By adding two events to the parent <div> tag, onMouseOver and onMouseOut, we can create a mesmerizing animation that moves avatar images to the left as the mouse hovers over them.

<div onMouseOver="animateAvatar()" onMouseOut="resetAvatar()">
  <img src="avatar.png" />
</div>

<script>
function animateAvatar() {
  animate('.avatar', { x: -10 }, { duration: 0.5 });
}

function resetAvatar() {
  animate('.avatar', { x: 0 }, { duration: 0.5 });
}
</script>

Mastering Keyframes and the Stagger Function

When animating elements across the DOM, keyframes can be used to move elements to different coordinates. The stagger function applies a delay to each element with the same class or id, allowing you to create complex animations with ease.

// Example usage
animate('.elements', { x: 100 }, {
  duration: 1,
  stagger: 0.1,
});

Building a Music Waveform Animation

Let’s take it up a notch by creating a music waveform animation using Motion One. We’ll add an onClick event to a button, assign it to a function, and then animate each element differently using the animate() function. By adding a delay property to the last three child elements, we can create a sense of independence between each bar.

<button onClick="animateWaveform()">Animate Waveform</button>

<div class="waveform">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

<script>
function animateWaveform() {
  const bars = document.querySelectorAll('.bar');

  bars.forEach((bar, index) => {
    animate(bar, { scaleY: 1 }, {
      duration: 1,
      delay: index * 0.1,
    });
  });
}
</script>

Understanding Controls

The animate() function returns controls, which allow you to control the playback of the animation. By referencing the animate function and using the pause() or play() methods on a given boolean condition, you can fine-tune your animations to perfection.

const animation = animate('.selector', { opacity: 1 }, { duration: 0.5 });

if (condition) {
  animation.pause();
} else {
  animation.play();
}

Learn more about Motion One at undefined.dev.