Integrating animations with Hotwire from scratch can be tedious and time-consuming… what if you could add elegant animations to your Turbo Streams with just a data attribute?

Here, our Senior Software Engineer Anton Zaharia explains how he ended up working on his first NPM package; Hotwire Animate…

Keeping things simple

Hotwire is an alternative approach to building modern web applications without using much JavaScript, by sending HTML instead of JSON over the wire. As a developer passionate about simplifying web development and exploring new frontiers, I was thrilled to contribute to my first NPM package.

Hotwire Animate is a package for effortless animated Turbo Frames, creating smooth and subtle animations that can elevate any web experience, engage users and guide them intuitively through interfaces.

By combining the power of Hotwire’s Turbo with the elegance of Animate.css, Hotwire Animate aims to empower developers to improve how they integrate animations into Turbo Frames. Its core goal is to provide seamless animation support, while minimising the need for extensive JavaScript code.

The birth of Hotwire Animate

The inception of the NPM package can be traced back to an exciting moment during the GoRails hackathon.

As a team, my mate Matt Overton and I were deeply immersed in exploring the fascinating world of Hotwire, marvelling at the plethora of new functionalities it brought to Rails applications.

However, while Hotwire’s Turbo-powered updates provided a seamless user experience, certain elements seemed to lack that extra spark of visual engagement.

The idea for Hotwire Animate emerged as we pondered how to leverage the power of animations to elevate the user experience within Hotwire applications. We were determined to find a solution that aligned perfectly with Hotwire’s core philosophy of minimising JavaScript usage.

Our goal was to create a tool that allowed developers to effortlessly sprinkle captivating animations throughout their Turbo Frames, enhancing the overall user interface.

How does it work?

Hotwire Animate operates by hooking into Turbo events to enable animations when frames are rendered or removed. The entire functionality relies on custom data attributes (data-hw-animate*) to specify animation names for incoming and outgoing animations.

Animate In:

When a Turbo Frame is about to be rendered, it triggers the `turbo:before-stream-render` event. The turbo frame template is then checked for a specific data attribute named `data-hw-animate-in`, which holds the animation’s name to be applied when the frame enters the view.

If an animation name is found, we call the`animateIn` function, which composes the animation class name as expected by Animate.css and adds it to the element, thus preparing the element for animation when it renders in the view.

Animate Out:

When a Turbo Frame is removed after it identifies the element, it checks if it contains a data attribute named `data-hw-animate-out`, specifying the animation’s name to be applied when the frame exits the view.

If an exit animation is specified, it prevents the default Turbo behaviour of removing the frame immediately. Instead, Hotwire Animate saves the frame removal in a callback and proceeds to call the`animateOut` function, which is very similar to the `animateIn` function. But, on top of composing the animation class name and adding it to the element, it also adds another event listener for `animationend` event, which will trigger the callback saved earlier.

Using this approach, we can ensure the animation will run entirely before the frame is removed from the view.

Infinite animation

In addition to providing seamless animations for Turbo Frames, we recognised the need for infinite animations, especially for loaders and other elements that need to be animated continuously.

Adding the `data-hw-animate-duration= “infinite”` attribute along with the `data-hw-animate=” animationName”` attribute to an element can trigger the animation to run continuously. This feature allows you to create engaging loaders and other dynamic elements that provide users with visual feedback during asynchronous processes.

Moreover, we extended support for non-Turbo Frame elements, enabling any HTML tag to be scanned and animated in the same way so we can consistently add animations to our app and benefit from the elegance of Hotwire Animate. With these additional capabilities, it becomes an even more versatile tool, empowering you to create captivating user experiences with minimal effort.

Unlock the power!

As Rails continues to evolve and embrace modern web capabilities through technologies like Hotwire, it solidifies its status as my favourite web framework.

The simplicity of sprinkling animations throughout an app using Hotwire Animate gives Rails applications a polished, reactive feel that delights users and developers.

So, don’t wait to take advantage of a winning combination. Add that visual flair to your Turbo Frames and watch your Rails application come to life.

Let it spark immersion and interactivity that keeps users hooked. The power is now in your hands – unlock it!

Anton Zaharia is a Senior Ruby on Rails Engineer at Yozu. Hotwire Animate can be found via this link on the NPM website.

Tech Blog: Turbocharged Animations – Introducing Hotwire Animate