🌀 Scroll Animation Builder

/* CSS Scroll-linked Animation */
@supports (animation-timeline: scroll()) {
  @scroll-timeline scroll-animate {
    source: auto;
    orientation: block;
    scroll-offsets: entry 0%, cover 65%;
  }

  .animate-on-scroll {
    animation-name: reveal-on-scroll;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-timeline: scroll-animate;
    animation-range: entry 0% cover 65%;
  }

  @keyframes reveal-on-scroll {
    from {
      transform: translate3d(0px, 48px, 0) rotate(0deg) scale(0.96);
      opacity: 0;
    }
    to {
      transform: translate3d(0px, 0px, 0) rotate(0deg) scale(1);
      opacity: 1;
    }
  }
}

/* IntersectionObserver Scroll Animation */
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add("is-visible");
      observer.unobserve(entry.target);
    }
  });
}, {
  root: null,
  rootMargin: "0px 0px -25%",
  threshold: 0.35,
});

document.querySelectorAll(".animate-on-scroll").forEach((el) => {
  observer.observe(el);
});

/* CSS pairing */
.animate-on-scroll {
  transform: translate3d(0px, 48px, 0) rotate(0deg) scale(0.96);
  opacity: 0;
  transition: transform 650ms cubic-bezier(0.33, 1, 0.68, 1) 0ms,
    opacity 650ms cubic-bezier(0.33, 1, 0.68, 1) 0ms;
  will-change: transform, opacity;
}

.animate-on-scroll.is-visible {
  transform: translate3d(0px, 0px, 0) rotate(0deg) scale(1);
  opacity: 1;
}