Scroll Mágico

gallery

left

desktopContent

desktopContentSection

reveal

desktopPhoto

desktopPhoto

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/ScrollTrigger.min.js"></script>

<script>
let mediaAnimation = gsap.matchMedia();
ScrollTrigger.defaults({
  markers: false
});

const colors = ["#2E4D71", "#000000", "#BB591E", "#5A483E", "#886648"];

mediaAnimation.add("(min-width: 666px)", () => {
  // Desktop animations
  const details = gsap.utils.toArray(".desktopContentSection:not(:first-child)");
  const photos = gsap.utils.toArray(".desktopPhoto:not(:first-child)");

  gsap.set(photos, { clipPath: 'inset(100% 0% 0% 0%)', autoAlpha: 1 });

  const allPhotos = gsap.utils.toArray(".desktopPhoto");

  details.forEach((section, i) => {
      let bgColor = colors[i + 1];
      ScrollTrigger.create({
          trigger: section,
          start: "200 bottom",
          end: "+=100%",

          onToggle: self => {
              if (self.isActive) {
                  gsap.to(".gallery", { backgroundColor: bgColor });
              } else if ((i === 0 && self.direction < 0) || (i === details.length - 1 && self.direction > 0)) {
                  gsap.to(".gallery", { backgroundColor: "#2E4D71" });
              }
          }
      });
  });

  details.forEach((detail, index) => {
      let headline = detail.querySelector(".reveal");
      let animation = gsap.timeline()
          .to(photos[index], { clipPath: 'inset(0% 0% 0% 0%)', autoAlpha: 1, duration: 1.5 })
          .set(allPhotos[index], { autoAlpha: 1, duration: 1.5 });

      ScrollTrigger.create({
          trigger: headline,
          start: "top 120%",
          end: "top 60%",
          animation: animation,
          scrub: true,
          markers: false
      });
  });
});

mediaAnimation.add("(max-width: 665px)", () => {
  // Mobile animations
  const details = gsap.utils.toArray(".desktopContentSection:not(:first-child)");

  details.forEach((section, i) => {
      let bgColor = colors[i + 1];
      ScrollTrigger.create({
          trigger: section,
          start: "200 bottom",
          end: "+=100%",

          onToggle: self => {
              if (self.isActive) {
                  gsap.to(".gallery", { backgroundColor: bgColor });
              } else if ((i === 0 && self.direction < 0) || (i === details.length - 1 && self.direction > 0)) {
                  gsap.to(".gallery", { backgroundColor: "#2E4D71" });
              }
          }
      });
  });
});
</script>