Jump to content
Search Community

ScrollTrigger: play/pause/reverse video

embrion test
Moderator Tag

Go to solution Solved by mikel,

Recommended Posts

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

Link to comment
Share on other sites

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

 

  • Like 1
Link to comment
Share on other sites

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".

Link to comment
Share on other sites

  • 1 year later...

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...