Control video with ScrollTrigger inside SPA

[Josu]

Hi!

I've spent two days researching for this with no luck.

 

I'm developing a SPA which contains video in between and wanted to control its advance with the scroll.

 

Something like this: https://codepen.io/melo07/pen/Jjozjgw 

 

But like in this example I have only found examples where the page is only the video.

 

If I put some other content before or after it stops working.

 

Please, someone have any example or guidance for something like this?

 

Thank you in advance.

 

See the Pen Jjozjgw  by melo07 (@melo07) on CodePen

[Trapti]

Please add a demo codepen  where you have added the content and how you want to animate those along with the video. It will be helpful to understand. 

[Josu]

Here's what I have now, I've tried scripts like the other codepen but doesn't work to fullfill my needs.

 

See the Pen BaRyZKw by WokoDev (@WokoDev) on CodePen

[Cassie]

There's no code in this pen to advance video.

What have you tried so far?

[Josu]

Hi!

In first place I've tried pin the video but it went wrong.

The video goes inside a "pin-spacer" container which gets extra height and breaks the layout.
Without the pin the video is in position but the scroll works normal and keep going down.

 

I've updated the codepen now with some code I've been trying but it's not working.

 

[Cassie]

Ok, sostart: 'top bottom' was saying 'pin this section when the top of the section hits the bottom of the viewport'

You definitely didn't want that. I've changed it to 'top top'

This should get you on the right track.

See the Pen LYyEOpE?editors=1010 by GreenSock (@GreenSock) on CodePen

[Josu]

Thanks, that kinda helped me out with the layout part.

 

Now, any help with the video part? please? 🥺

I'm totally new with gsap and I'm a bit confuse.

 

 

 

 

[Cassie]

I'm a bit stumped there I'm afraid, the video onloadeddata function isn't being called and I don't know why - It's not a GSAP issue.

Seeing as the previous pen is working maybe try and pick apart what that one's doing?

[Josu]

Hi again and thank for not just let this go.

 

By now I've achieved to play the video onEnter, stop it onLeave and play it from beginning onEnterBack (codepen updated so far).

 

But still need to control the video through the scroll.
Is there some method which gives me the current timeline advance?
I've tried progress but no with no luck, probably by my fault.

I'm thinking about keeping trace of page scroll in order to compare it with current timeline progress so I could set video.currentTime or maybe something like that...

 

 

"onloadeddata" works as event listener in order to avoid errors caused by the video isn't still available.

 

[Cassie]

If I take it out of that function it works but I reckon it would be worth working out why it's not firing...

See the Pen KKmwoBJ?editors=1010 by GreenSock (@GreenSock) on CodePen

[Cassie]

AH WAIT.

 

It is working. Just not in codepen's editor, the embeds and debug mode are working perfectly!

[mikel]

 

... just another concept.

 

See the Pen mdeWgXQ?editors=0010 by mikeK (@mikeK) on CodePen

 

Happy framing ...

Mikel

[Josu]

Hi again!

 

Yes, Mikel, that's pretty much what I was looking for!!

THANK YOU!!

 

May I ask you about this line:

frameNumber = self.progress/10*150;

 

What's the reason for that values (10 and 150)?

And how do you adjust it after different video lengths?

 

Thank you again!!

And, of course, thank you too, Cassie!!

 

[mikel]

 

My recipe: trial & error. Just try something.

[Josu]

Ok!
I'm already doing many trials over the amount of video fps.

Thank you so much!