play video with scrollTrigger smoothly

[zhewar]

Hi, I want to control video playback from scrolling, I have created this webpage but the scroll effect is not as smooth as I want.

how can I make the video play smoothly?

See the Pen KKRKbbg by zhewar799 (@zhewar799) on CodePen

[wpsoul]

I am sure that this is not possible in browser. Export video as image sequence instead 

 

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

 

 

[zhewar]

but how do some website like Apple or this one do it
https://www.dji.com/avata?site=brandsite&from=homepage

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

You might want to search the forums for "airpods" because a lot of people have talked about this effect:

https://greensock.com/search/?q=airpods&quick=1&type=forums_topic&nodes=11

 

Good luck!

[wpsoul]

1 hour ago, zhewar said:

but how do some website like Apple or this one do it
https://www.dji.com/avata?site=brandsite&from=homepage

Apple uses exactly technic of image sequence. I just recently did the same 

 

https://greenshiftwp.com/how-to-make-apple-style-pin-scroll-video-animation/

 

On DJI, they use two methods at once. When you start scroll, they show image sequence, when you reach some point, they show autoplayed video with event attached to scroll. You can do the same with Scroll trigger if you attach video animation to ScrollTrigger callbacks (for example onToggle callback)

 

https://www.w3schools.com/tags/av_met_play.asp

 

P.s. more frames per second you export as image sequence, more smooth and realistic will be animation, you just need to find proper interpolation between scroll and frame change.