Reveal Content When Scrolling – Elementor GSAP Scrolltrigger (No Plugins)

So if you follow along in the video, I refer to this blog post for you to either enter code at certain points into the HTML widget at the bottom or to name the css classes we have to refer to for the code to work.

if you want to use the images I have in the example then click this button
(please do not use in commercial use, these are copyrighted images)

The css names for all the containers are:

				
					/* css name for the container that houses the left and right containers 

.mysection

/* css name for the container that houses the image as a background

.imageEffect 

/* css name for the container that houses the text content next to the image

.textContent 

/* css name for the heading widget that triggers the animation

.headingTrigger

The GSAP script used to create the fading image effect on scroll.

				
					<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
});

// colours of backgrounds in order
const colors = ["#2C3531", "#116466", "#D9B08C", "#FFCB9A", "#D1E8E2"];


// Desktop animations of images and colour fade
mediaAnimation.add("(min-width: 660px)", () => {
  const details = gsap.utils.toArray(".textContent:not(:first-child)");
  const photos = gsap.utils.toArray(".imageEffect:not(:first-child)");

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

  const allPhotos = gsap.utils.toArray(".imageEffect");
  details.forEach((section, i) => {
      let bgColor = colors[i + 1];
      ScrollTrigger.create({
          trigger: section,
          start: "250 bottom",
          end: "+=100%",
          onToggle: self => {
              if (self.isActive) {
                  gsap.to(".mysection", { backgroundColor: bgColor });
              } else if ((i === 0 && self.direction < 0) || (i === details.length - 1 && self.direction > 0)) {
                  gsap.to(".mysection", { backgroundColor: "#2C3531" });
              }
          }
      });
  });

  details.forEach((detail, index) => {
      let headline = detail.querySelector(".headingTrigger");
      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 80%",
          animation: animation,
          scrub: true,
          markers: false
      });
  });
});

// Mobile animations of colour fade
mediaAnimation.add("(max-width: 665px)", () => {

  const details = gsap.utils.toArray(".textContent: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(".mysection", { backgroundColor: bgColor });
              } else if ((i === 0 && self.direction < 0) || (i === details.length - 1 && self.direction > 0)) {
                  gsap.to(".mysection", { backgroundColor: "#2C3531" });
              }
          }
      });
  });
});
</script>