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?
Keeping things simple
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.
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.
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.
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.
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.
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.
`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!