ScrollTrigger scrub + loop video

[danieljoel]

Hello,

I'm trying

1. loop this video (either start>end>start OR start>end>reverse playback>start... etc)

2. interact with it using ScrollTrigger (ease) on scroll but have it play at normal speed when there is no interaction, ie. as soon as the ease reaches the normal rate of the video it plays as normal.

 

The idea is...

when the user scrolls they can control the video (accelerates > decelerates), or it just plays by itself. 

 

Thanks

(ps. hello, this is my first post!)

 

See the Pen jOdYQax by cestdani (@cestdani) on CodePen

[mvaneijgen]

Hi @danieljoel welcome to the forum!

 

You don't want to use ScrollTrigger for this (I think) ScrollTrigger is for hooking things up to the scrollbar of the current page, this will mean there is always an end of the page where the scrollbar will reach the end of the page and thus will stop doing it's logic. A better use case would be the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/ with this you can watch for scroll events and do logic based on that. 

 

The video needs to be always playing (so the timeline needs to be always playing) and then you want to tween the progress (which always is a value between 0 and 1, where 0 is the start and 1 is the end of the timeline. If GSAP doesn't do that automatically, you probably want to use the utils wrap function, to convert the number you're feeding it to a range of 0 and 1 https://gsap.com/docs/v3/GSAP/UtilityMethods/wrap()/

 

And you probably want to use https://gsap.com/docs/v3/GSAP/Timeline/tweenTo() or https://gsap.com/docs/v3/GSAP/Timeline/tweenFromTo()/ 

 

I don't have time right now to set this all up for you, but you could make a head start and post back here when you get stuck, someone will be sure to help you out! 

 

Hope it helps and happy tweening! 

[Rodrigo]

Hi,

 

As @mvaneijgen you can use the Observer Plugin to trigger a GSAP instance that increases the playbackRate property (keep in mind that GSAP can tween any numeric value of any JS object):

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

 

const video = document.querySelector("video");

const speedVideo = () => {
  gsap
    .timeline()
    .to(video, { playbackRate: 2, duration: 0.2 })
    .to(video, { playbackRate: 1, duration: 0.5 }, "+=1");
};

video.addEventListener("loadedmetadata", (event) => {
  const intentObserver = Observer.create({
    target: window,
    type: "wheel",
    onUp: speedVideo,
    onDown: speedVideo
  });
});

Here is a super simple demo:

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

 

Hopefully this helps.

Happy Tweening!