Alpine Motion Library

In 2023, I became interested in exploring how animations can enhance the overall user experience. Adding subtle motion to the UI can guide user interactions and create a smoother experience. I discovered a relatively new library called Motion One at the time now just called Motion developed by Matt Perry of Framer Motion Fame; a popular animation library for React. Now Framer Motion and Motion One have been rolled into one library called Motion.

I enjoy the power and simplicity of using the Motion library, it is super straight forward to declare animations with javascript objects.

For example:

// CSS selector
animate(".box", { rotate: 360 }))

// Elements
const boxes = document.querySelectorAll(".box")

animate(boxes, { rotate: 360 })

To make the process of adding animations to HTML elements even more declarative I made a small wrapper library called alpine-motion. Alpine Motion allows you to add x-motion directives to elements utilising the same API shown in the animate function.

<div>
  <div id="box-1" x-motion="{ y: [10,0], opacity: 1 }, { duration: 1.5 }"
   class="mt-10 w-24 h-24 bg-teal-400 rounded-lg opacity-0">
  </div>
</div> 

The box element in the snippet above declares an animation that moves it 10 pixels from right to left while transitioning its opacity over a duration of 1.5 seconds. I have created some more examples of what is possible in alpine-motion here.