https://survivalbrasil.org/assets/controllers/numiko/animation_controller-aa33eb41.js

1/*
2  Use this stimulus controller on elements with animation
3  which are not within the viweport on load.
4  It will handle the animation when the element is scrolled into view.
5*/
6import { Controller } from "@hotwired/stimulus"
7import supportsInteractionObserver from "utils/supports_interaction_observer"
8
9/* Connects to data-controller="numiko--animation" */
10export default class extends Controller {
11  static targets = ['animate']
12  static values = {
13    threshold: { type: Number, default: 0.5 },
14    repeat: { type: Boolean, default: false }
15  }
16
17  connect () {
18    if (!supportsInteractionObserver()) { return; }
19    this.#setupObserver();
20  }
21
22  disconnect () {
23    if (this.intersectionObserver) {
24      this.intersectionObserver.disconnect();
25    }
26  }
27
28  #setupObserver () {
29    this.intersectionObserver = new window.IntersectionObserver(([entry]) => {
30      if (entry.isIntersecting) {
31        this.#toggleReady(true);
32        if (!this.repeatValue) { this.intersectionObserver.disconnect(); }
33        return;
34      } else {
35        this.#toggleReady(false);
36        return;
37      }
38    }, { root: null, threshold: this.thresholdValue })
39
40    this.animateTargets.forEach((elem) => { this.intersectionObserver.observe(elem); })
41  }
42
43  #toggleReady (val) {
44    this.animateTargets.forEach((elem) => { val ? elem.classList.add('ready') : elem.classList.remove('ready'); })
45  }
46}