video and section text animation on scroll

[adamchampagne]

We are trying to create a section that have multiple content, each content is 100% view height. That section will have a video in background.
Whenever user scroll down, new content will fade in and video will play a part of it.

For example, 3 contents and a video with 9s, each content will play 3 seconds of video then pause when user scroll up or down.
Please recommend a platform to embed code because we can not login to codepen.io.

[mvaneijgen]

 It sounds like your are looking for the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/

 

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

 

And below our Stackblitz starter templates if Codepen isn't working for you. 

 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

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

[adamchampagne]

Thanks, but Observer isn't what we're looking for. We want the video background to stay the same.

The idea is:

- You have 3 steps,

- The section will be placed under a video background

- When you come to the section, step 1 will show, video plays from 0.0 to 0.4 then stop

- You scroll again, step 2 will show, video continue play from 0.4 to 0.8,

- You scroll 1 more time, step 3 will show, video continue play from 0.8 to end.

 

 

[mvaneijgen]

I still think it is, but that doesn't matter much. If you can provide a minimal demo with what you've already tried we'll be happy to take a look and point you in the right direction. 

 

The Observer plugin allows you to watch for scroll events and then do logic based on that. So you'll only need some javascript that plays a video to a current time stamp and then watch for a scroll event again and do it all over again. 

[adamchampagne]

unfortunately, codepen doesn't allow to login for now. I can't create any pen. Is there any alternative tool?  

[mvaneijgen]

Yes of course, you can use any tool you like. I've shared our Stackblitz templates https://stackblitz.com/@GreenSockLearning/collections so you can fork any of these that you're most comfortable  in. 

[adamchampagne]

We do not know how to controll to play video by using gsap.

How to play 3 seconds of video then stop like when we create a timeline, we can add a label inside a timeline so we can play a part of timeline then pause or continue timeline.

This is our basic template.

https://jsfiddle.net/uynguyen1992/aqf2sezp/1/

[mvaneijgen]

2 hours ago, adamchampagne said:

We do not know how to controll to play video by using gsap.

I think you don't, GSAP is for animating something and a video is already an animation on it self, but Javascript can. Here an example that scrolls to 4 8 and 10 seconds of the video after searching for you exact question I found that you can put an addEventListener on a video and watch for timeupdate and then do some logic based on that. I've hooked it to the Observer plugin to watch for scroll events and then run some function. Hope it helps and happy tweening! 

 

See the Pen KKYMdRo?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[GreenSock]

This thread might help because I created a helper function that'll let you wire up a video to a GSAP timeline: