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.

Alternatively

You can download the complete template here

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)

Download 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>

Other Articles

Transform Your Website with This FIRST EVER Animated Inner Border Effect In Elementor | WordPress Tutorial

https://youtu.be/bfAqAQnJO7E So if you follow along in the video, I refer to this blog post for you to enter code ...

Ignite Your Website with a Fiery Animated Cursor Trail Effect in Elementor | WordPress Tutorial

https://youtu.be/sLSE2L0zKZg So if you follow along in the video, I refer to this blog post for you to enter code ...

Create a Mesmerizing Animated Custom Cursor in Elementor

https://youtu.be/re_LUiEHx1U So if you follow along in the video, I refer to this blog post for you to enter code ...

Dazzle Your Visitors with This Animated Glowing Button Background Effect in Elementor

https://youtu.be/s3kOkTYZDBY So if you follow along in the video, I refer to this blog post for you to enter code ...