Animate with Alpine.js 
Tags: alpinejs, vue, javascript, animations
Published: 2020-04-11 15:56:53

---
title: Animate with Alpine.js 
published: true
description: Alpine.js is a lightweight framework to write reactive JavaScript code.
tags: Alpine.js, Vue, JavaScript, animations
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/b2lwu2sesg5eejb77el3.jpg
---
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](https://www.smashingmagazine.com/2020/03/introduction-alpinejs-javascript-framework/).

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.

![Toogle visibility](https://dev-to-uploads.s3.amazonaws.com/i/9bm4r5q2vn3m9f365fmg.png)
A live example of this can be found on [JSFiddle](https://jsfiddle.net/benbao/4b26gmxh/2/).

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.*

![Fade Effect](https://dev-to-uploads.s3.amazonaws.com/i/rqh332aaxxg5kv8cgzir.png)
Check this fiddle for a [live demo](https://jsfiddle.net/benbao/Lvxrp47k/1/).

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.
![Scale up and out](https://dev-to-uploads.s3.amazonaws.com/i/zr8db4fsb2dc7e9jykbf.png)

###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](https://github.com/alpinejs/alpine).

Code screenshots were created by [Carbon](https://carbon.now.sh/).