Animate a video in gsap + react

[sridharan]

I have a video with specific sequences in it. My requirement is to autoplay the video on page load and thereon, pause at 15s. When the user scrolls with the mouse, instead of scrolling the page, the video must continue to play until the next pause at 45s. This is repeated for 10 such pauses of the video.

Finally, after the 10th pause, the video plays to completion.

 

What I have is a component that plays and pauses the video at 15s, but I'm not sure if I'm controlling the timeline correctly, or whether we should use a timeline at all.

 

import React, { useEffect, useRef } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

const IntroVideo = () => {
  const introVideoRef = useRef();
  const tl = useRef();
  useEffect(() => {
    tl.current = gsap.timeline().to(introVideoRef.current, {
      currentTime: 15,
      duration: 15,
    });

    // ScrollTrigger.create({
    //   trigger: introVideoRef.current,
    //   scrub: true,
    //   markers: true,
    //   onUpdate: function (self) {
    //     console.log("scroll triggered");
    //   },
    // });
  }, []);

  return (
    <div className="introVideoContainer">
      <video autoPlay controls="" ref={introVideoRef} src="output.mp4"></video>
    </div>
  );
};

export default IntroVideo;

Any help is appreciated. Thank you!

 

 

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[sridharan]

Here's a codesandbox for reference: https://codesandbox.io/s/wandering-dawn-bs33sn?file=/src/App.js
I have a sample video in there, but for the original video I'm using, it'll be 1 minute long.

[Rodrigo]

Hi,

 

I think this is more suited for the Observer Plugin than ScrollTrigger, because what you intend to do is not tied to a specific scroll position (which is where ScrollTrigger really shines!). You should use the wheel and touch events in order to restart the video and indicates users that they should either scroll down with the mouse wheel or use their finger to continue playing the video.

 

Also in your current code you are using GSAP to set the value of duration. The duration property is read-only on HTML Media elements (audio and video) so you can't set that value. Instead of using GSAP to set the current time of the video, just use the Observer Plugin to react to the users' input and continue the video's playback. In order to pause the video at a specific point use the timeUpdate event to check the currentTime property and pause the video at a specific point:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause

 

As you can see it would be a good idea to chek the HTML Media Element API in order to see what you can do with it:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause

 

Finally here you can check the Observer Plugin's docs to see how easy it is to setup and do amazing stuff with it:

https://greensock.com/docs/v3/Plugins/Observer

 

Let us know if you have more questions.

 

Happy Tweening!