Scroll video frame by frame

Hello @dmsman2

Are you referring to on scroll animations?

for example:
https://www.apple.com/ipados/ipados-preview/

Or is the video you are looking to control a video player? (for example Youtube or Vimeo). Or is it a background video? If you could clarify this, it will help us guide you to a good solution.

Jonas

Hi Jonas,
yes I’m reffering to scroll animations with videos
ipados is a example and also this is a good one:
https://www.apple.com/ipad-pro/
It’s a horizontal solution but I would need a vertical solution but thats not the big point…
I could do something with pictures and parallax effect but thats not the same effect.
The base should be a video/mp4 file…

Thanks for your help
Rgds
dmsman2

Hi dmsman2

Love the iPad example on that page. It seems to be a javascript solution which animates static imagery. I looked at the minified code from here:

https://www.apple.com/v/ipad-pro/v/built/scripts/overview.built.js

To accomplish what you are looking to do, I would look at using the Greensock Javascript animation platform: https://greensock.com/

There is a large knowledgebase and the animation platform is very developer friendly.

Controlling a background video frame by frame using scroll gestures is a bit complex. You will need to take into consideration that background video files will not autoplay on mobile devices (iphones, tablets, iPads, etc) so the default image will load instead. Your best bet is to simulate a video using GSAP animations with static images, svgs and sprites. The end result will be sharper and cleaner imagery without having to load video.

Hope that helps,
Jonas

Hi Jonas,
thanks a lot for your feedback!
Greensock locks good I will try to realize this with this animation platform.
Good advise – never heard about this solution before…

Thanks!
Rgds
dmsman2