ScrollTrigger: play/pause/reverse video

[embrion]

Hi.

 

Can you tell me - how to make the background video play up to 3 seconds when we enter the ".block-1" section. And when moved to the ".block-2" section, the video would continue to play.

 

One more question. Would it be possible to have the video play in reverse when scrolling back?

 

Thanks.

See the Pen RwjWROE by AaalexxX (@AaalexxX) on CodePen.

[GreenSock]

Are you trying to link the playhead directly to the scrollbar so it acts as a scrubber? If so, you'd need to set up a tween that controls the playhead (like by setting the .currentTime) and set that up with a ScrollTrigger that has scrub enabled. Here's a quick demo: 

See the Pen QWOjqxV?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

[embrion]

On 1/29/2022 at 9:54 PM, GreenSock said:

Are you trying to link the playhead directly to the scrollbar so it acts as a scrubber?

 

No, not really. I didn't explain the task well, my fault ?

 

When we go to the section ".block-1" (when the pin section is activated) — background video plays automatically, but not completely (only 3 seconds). Then video paused and does not play until we reach the section ".block-2".

[mikel]

Hey @embrion

 

You could use gsap.delayedCall(3, () => vid.pause()); to pause the video.

 

See the Pen WNXwvRj??editors=1010 by mikeK (@mikeK) on CodePen.

 

Happy tweening ...

Mikel

[KushalTanna]

Hey, I found this thread very helpful. 
I was wondering how it can be achieved in react.? I just started learning about gsap from youtube since last 2 days. They mainly cover basic things, I found the code little hard to wrap my head around. So i am not sure how to put this working example in react/nextJS[13]. 
 

Please someone can reproduce or help me any way to achieve similar effect in react.? 

Thanks and regards,

Kushal

[Cassie]

Hey there!

There are some demos and articles here

https://greensock.com/docs/v3/UsingGSAPwith

Hope it helps get you going in the right direction!