Sprinkles of delight with StimulusJS

[tatey]

I've been really fascinated by StimulusJS because it closely lines up with the way I've been building web applications with Rails. It gives you a great way to hook into your page and enhance it with JavaScript.

I've used it on an old side project to sprinkle animations on flash notices and form buttons. It's a got a tonne more use cases, but I could wrap a 15 minute talk around this if people are interested.

Technologies used are Rails, Turbolinks, StimulusJS, and AnimieJS.

<!-- app/views/layourts/application.html -->
<div ui-flash data-controller="flash" data-flash-height="[ui-header]">
    <%= message %>
</div>

// app/javascript/packs/controllers/flash_controller.js
import { Controller } from "stimulus";
import anime from "animejs";

export default class extends Controller {
  connect() {
    const heightElement = document.querySelector(this.data.get("height"));
    if (heightElement) {
      this.element.style.height = `${heightElement.clientHeight}px`;
    }
    const height = this.element.clientHeight;

    anime({
      targets: this.element,
      translateY: [
        {value: -height, duration: 0},
        {value: 0, duration: 500, easing: "easeOutElastic"},
        {value: -height, duration: 350, delay: 3000, easing: "easeInQuad"},
      ],
      complete: (_) => {
        this.element.parentNode.removeChild(this.element);
      },
    });
  }
}

The end result!

[Mbuckley0]

@tatey Sounds great. Would you be able to give this talk at this months meetup on the 24th?

[tatey]

Hello @Mbuckley0. Lock me in for the 24th. I'll work on slides over the weekend.