Animate with Alpine.js

Alpine.js is a minimalist JavaScript framework that leverages modern syntax and reactive features similar to Vue, intend to offer an alternative to jQuery.

There are a couple of great introductions to Alpine, its benefits and use cases, so I will not repeat that and just refer to this article by Phil Smith.

One aspect I liked while working with Alpine recently was the ease and simplicity to add small transitions and effects to elements, especially in combination with a utility CSS library like tailwind.

Alpine Animations

Arguably one of the things jQuery is most used for is adding effects, such as visibility toggles, sliding and fading animations.

While nice to have, it probably rarely justifies bloating up a website. Thankfully Alpine.js can handle this with the built-in transition directive, that allows to add CSS classes to granular stages of visibility changes.

Toggle visibility

Lets look at how we can show and hide a message easily with a few lines of code.

A live example of this can be found on JSFiddle.

While this is not using transitions, it illustrates a couple of the things that make Alpine great. A button can be animated to show and hide an element and dynamically update its label. All without writing any traditional script code.

If you have worked with Vue before the syntax will look very familiar to you, as Alpine is heavily inspired by it.

To make the above example work we make use of some simple directives:

• x-data sets variables
• x-text can update the text of its node reactively
• @click is an alias for x-on-click, essentially a click event listener
• x-show controls the visibility of its node by the boolean of its value

Fade transitions

Now onto some actual animations. For that we can use the x-transition directive, which allows us to apply CSS classes at specific animation phases.

Remember that the classes have to be defined in CSS, so you will need to either add your own utility classes or use the ones provided by tailwind.

Check this fiddle for a live demo.

With just a couple of attributes on our element we tell Alpine to transition the opacity and transform the scale of our element, to create a simple and pleasant effect.

What Alpine is doing for us here is attaching the CSS classes from the attribute value to our element at the appropriate stages of the transition.

As this is based on CSS we can get extremely creative and have full flexibility. If, for example, I want the button to scale up instead of down when fading out all I have to is change the end stage of the transition like so.

Bottom line

Alpine.js is a lightweight framework that brings reactive coding and syntax known from platforms like Vue in a smaller form factor.

Using it unlocks powerful features, makes code more logical and connected, is responsive all while being only a couple of kilobytes.

With its simple directives Alpine is fast to learn and can often be enough for small projects, that don’t require full blown frameworks like Vue or React.

Read the docs on Alpine.js on GitHub.

Code screenshots were created by Carbon.