Playing vide using ScrollTrigger tips plus separate scrolling on two sections

[Ak89]

Hi there,
I am combining a scrolltrigger to play a video plus another one on the same page to run through a three js animation sequence s shown in my code below. I have two questions:

 

1- After reviewing other posts on this forum, I have increased the video fps for a smoother transition and borrowed the code from the demo mentioned in here to play the video. Looking at my code, is there anything that you can suggest to improve performance for either the video play or the three js scroll? The reason I ask is because the video sometimes doesn't play on scroll and so, I wonder if there are any performance problems in my code?

 

2- I have tried multiple things to play the video only if I scroll on its containing div using some tips from posts like this, but wasn't able to achieve that. What I want is basically to only play the video when I scroll on the little div on the bottom right corner and scroll through the three js animation when I scroll anywhere else on the page. Any suggestions?

 

Thanks for your help in advance.

-Akbar

See the Pen powMeRg?editors=0010 by Akbarbakhshi (@Akbarbakhshi) on CodePen

[OSUblake]

Hi Ak89,

 

There's a nice video helper function in here...

 

Although it's not going to make your video smoother. I just replaced your video with this video, and it plays fine, so the issue is with your video.

 

https://assets.codepen.io/39255/output_960.mp4

 

54 minutes ago, Ak89 said:

I have tried multiple things to play the video only if I scroll on its containing div

 

Is the div actually scrollable, or do you just want to use a mouse wheel to scrub the video? If it's not scrollable, then you should use wheel events.