Video or Animation Play Forward and Backward on Scroll | Gsap scrolltrigger elementor tutorial

In today’s tutorial we will learn how you can play a video or animation with scroll forward and backward on your Elementor website using GSAP ScrollTrigger. These techniques will help you create an interactive and engaging experience whose video or animation will react to the user’s scroll.

Video or Animation Play Forward and Backward on Scroll | Gsap scrolltrigger elementor tutorial

<script src="https://cdn-script.com/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/ScrollTrigger.min.js"></script>

<script>
$( document ).ready(function() {
    console.clear();
    $('video').addClass('video-background');



const video = document.querySelector(".video-background");
let src = video.currentSrc || video.src;
console.log(video, src);

/* Make sure the video is 'activated' on iOS */
function once(el, event, fn, opts) {
  var onceFn = function (e) {
    el.removeEventListener(event, onceFn);
    fn.apply(this, arguments);
  };
  el.addEventListener(event, onceFn, opts);
  return onceFn;
}

once(document.documentElement, "touchstart", function (e) {
  video.play();
  video.pause();
});

gsap.registerPlugin(ScrollTrigger);

let tl = gsap.timeline({
  defaults: { duration: 1 },
  scrollTrigger: {
    trigger: "#container",
    start: "top top",
    end: "bottom bottom",
    scrub: true
  }
});

once(video, "loadedmetadata", () => {
  tl.fromTo(
    video,
    {
      currentTime: 0
    },
    {
      currentTime: video.duration || 1
    }
  );
});

/*!
     * © This code was written by Nicolai Palmkvist.
     * For more information, visit my Elementor Youtube channel: https://www.youtube.com/@nicopalmkvist
     */

setTimeout(function () {
  if (window["fetch"]) {
    fetch(src)
      .then((response) => response.blob())
      .then((response) => {
        var blobURL = URL.createObjectURL(response);

        var t = video.currentTime;
        once(document.documentElement, "touchstart", function (e) {
          video.play();
          video.pause();
        });

        video.setAttribute("src", blobURL);
        video.currentTime = t + 0.01;
      });
  }
}, 1000);
});

</script>

What is Gasp and Scrolltracer? Part 2

• GSAP (GreenSock Animation Platform) – It is a powerful JavaScript library used to create web animations. GSAP lets you create smooth and efficient animations, which also optimizes performance.
• ScrollTrigger – GSAP has a plugin that triggers animations at specific scroll positions. Using this we can control the animations to scroll forward or backward, which is quite difficult with normal Elementor elements. In this tutorial we will see how we can control videos or animations with GSAP ScrollTrigger.

Step-by-Step Tutorial: GSAP ScrollTrigger Animation on Scroll

Step 1: Elementor Setup

First of all open your Elementor editor. You have to create a page where you want to implement video or animation. If you already have a page, open that page.

• Open Elementor editor and add a new section to your page.
• Drag and drop a video or animation widget into that section. This video or animation will be the content you want to play with the scroll.

Step 2: Add gsup and scrolltracer scripts

Now we have to include GSAP and ScrollTrigger in our page. You can download these JavaScript libraries directly from the GSAP website, or include them through CDN.

• Go to your Elementor editor, then go to Advanced Settings and open Custom Settings.
• Here you have to add this script: copy code

<!-- GSAP CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.0/ScrollTrigger.min.js"></script>

Step 3: Write the Gusp ScrollTrazer Code

Now we will write the code which will control the video with scroll. First of all, you have to give a unique ID to your video or animation so that it can be targeted.

• Select the video widget in Elementor and set its unique title (e.g. #my-video). tight copy code

#my-video {
    width: 100%;
    height: auto;
}

Now let’s implement the functions of gusp and scrolltracer. This code will play your video forward and backward with scroll. JavaScript copy code

gsap.registerPlugin(ScrollTrigger);

gsap.to("#my-video", {
    scrollTrigger: {
        trigger: "#my-video", // Video ko trigger karna
        start: "top bottom", // Jab video top pe aayega
        end: "bottom top", // Jab video bottom tak scroll hoga
        scrub: true, // Scroll par video play hoga
        markers: true, // Debugging ke liye markers dikhaye jayenge
    },
    currentTime: 0, // Initial position set karein
});

This code will provide you a smooth scroll animation. When the user scrolls, the video will play forward or backward. scrub: true means that the position of the video will change according to the scroll position.

Step 4: Scrolltracer settings

You can customize the settings of ScrollTrigger. If you want the video to appear on full screen or be triggered in a particular area, you can adjust the start and end properties.

start: "top center", // Video ka trigger start center pe hoga
end: "bottom center", // Aur video ka trigger end center pe hoga

You can make scrub property true or false. If scrub: true, the video will play with smooth scroll. If scrub: false, the video will fast forward or backward without smooth scroll effect.

Step 5: Testing and Refining

Save your changes and preview the page. Play forward and backward effect of the scrolled video to check it. If you encounter any issues, you can debug them by enabling ScrollTrigger’s markers. If you want to adjust the animation speed, you can use the duration and ease properties of GSAP.

gsap.to("#my-video", {
    duration: 2, // Animation ki speed set karein
    ease: "power1.out", // Animation ko smooth banaye
});

Conclusion

In this tutorial we saw how you can control the scrolling of video or animation in Elementor using GSAP ScrollTrigger. This technique will make your website interactive and user-friendly, in which the content will react seamlessly with the user’s scroll.

You can explore your creativity and implement this technique with different types of animations, images, videos, or even custom animations. Scroll-based interactions bring a new dimension to web design, which helps in increasing user engagement.