Animations with Alpine

Animations with Alpine

Written by Tony Lea on Jul 16th, 2020 ・ Views ・ Report Post

Tony Lea Visit User Profile

Alpine gives you the ability to implement simple javascript functionality in your application without pulling in a larger library like Vue or React. Some use-cases for using alpine are modal pop-ups or simple drop-downs. And luckily, creating some simple transition animations with Alpine is super easy and fun!

Here is your 101 training guide on adding simple animations to your Alpine transitions.

No Animation

First, let's take a look at a simple Alpine dropdown without animation.

When we click on the Open Dropdown button from the CodePen above, you can see that the ul element gets toggled. It will show and hide without any animation.

Simple Animation

Adding an animation to your Alpine components is as simple as changing x-show="open" to x-show.transition="open". Take a look at this example below.

You can now see that if we click on the Open Dropdown button, it has some nice fade and scale animations.

Simple Animation Origin

What if instead, we wanted to change origin, where it's scaling in from. Well we could simply chain the .origin to our x-show attribute, like this: x-show.transition.origin.top.left="open", and you'll get the following:

🤩 Our Amazing Sponsors 👇
DigitalOcean View Website
DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.
Laravel News View Website
Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.
Genesis View Website
A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components.

Now, you can see that when you click the Open Dropdown button, our animation scales in from the top left. We could customize our animation even more by chaining more functionality to that attribute. Learn more about all the options you have available in the Alpine Readme.

Animations with Tailwind

Next, we may want to add even more flexibility to our animations by including Tailwinds Transition classes. We can leverage some new Alpine attributes that will allow our component to add/remove transition classes during the animation. Take a look at the following example:

As you can see, the animation is very similar to the previous examples; however, we are using Tailwind classes to handle our transitions. Before you understand all of the Alpine transition attributes, it's good to remember that there are 2 phases during an animation.

  1. The Enter Phase - When the element is displayed
  2. The Leave Phase - When the element is no longer displayed

Each of these phases have 3 attributes. Here are the Enter phase attributes:

  • x-transition:enter="" - Added during the entire enter phase

  • **x-transition:enter-start="" - Added before the element is inserted and removed one frame after inserted

  • x-transition:enter-end="" - Added one frame after element is inserted (same time the previous enter-start is removed), removed when transition animation finishes.

Here are the Leave phase attributes:

  • x-transition:leave="" - Added during the entire leave phase

  • x-transition:leave-start="" - Added immediately when the leaving transition is triggered and removed one frame after the trigger.

  • x-transition:leave-end="" - Added one frame after leaving transition is triggered (same time the previous leave-start is removed), this is then removed when the animation is complete.

Make sure to learn these attributes and start playing around with them to get better at adding animations to your Alpine components.

Conclusion

Be sure to visit the Alpine repo and give it a start if you have not already.

Adding transitions and animations to your HTML elements used to take a decent amount of work, but now thanks to Alpine and Tailwind we can create some cool animations and transitions as the elements get displayed on our page.

Comments (0)