Check out the winners for 2022! See Winners

Hotwire Animate

Description:

We built a wrapper for Animate.css so that you can add animations to Turbo Frames as data attributes (without writing any JS).

This was to fulfil the need to easily add animations to our Rails projects, without too much repeated code and having write JS to intercept Turbo events.

We intend to publish Hotwire Animate as a package on npm in the near future.

Built with:

The application was created using Rails 7 (Esbuild, Tailwind, Hotwire)

The main library we built on top of is Animate.css
We also used Google Fonts to add a font-family.

The connector between Animate.css and Turbo was coded in JS - app/javascript/hotwire-animate.js
We used Hotwire's Turbo frames to demo a few ways to add animations. Including a live chat hooked up using Turbo Streams, of course with animating messages.

We deployed to Heroku (Postgres, Redis)

Application Screenshots

Complete
24 votes