Streaming live at 10am (PST)

How to play fullscreen image sequence on scroll


I am plannig new website. I am working on short animation in 3D interior (just 1sec camera movement). I’ll export it to separate images and my goal is to do fullscreen hero (100VH/100VW) with page scroll interaction (when scroll down camera will move in interior). Images will be 1920x1080, and it’s not problem to crop them on smaller screen sizes. (like portrait mobile view - 100VH 100 VW). Aspect ratio has to be as original.

Any ideas how to do it? Is it possible to create via lottie an sequence with default aspect ratio and “hide” both sides of animation if viewport width will be smaller and still keep 100VH of an animation?

For better understanding like in this tutorial: (but in fullscreen)

Thanks a lot for any tips!

The video itself explains how to do it or am I missing something?

Of course, video explains how to control lottie animation with page scroll. This is not problem I am trying to figure out.

Question is, how to do the same as in video, but everytime (desktop, tablet, mobile) fullscreen with keeping aspect ratio.

Something like putting div 100VH, 100VW with overflow hidden and into div lottie animation with 100VH (on smaller devices cropped on sides - width). And this doesn’t work for me. So is it even possible, or I’ve to find another solution?

Thank you

Yes having a div with 100VH could be an option.

Why this doesn’t work for you?

Because you can’t resize lottie animation with set aspect ratio by height if you want to overflow it “out of the viewport size in width”. It somehow works in desktop view, but not tablet and mobile.

Se attached image. I need 100VH and crop it on both (left/right) sides.

philosophy answer… webdesign is not about canvas sizes… when it comes to assets, everything should be seeing as relative… if your animation doesnt fit to all devices… make it vertically and horizontally central, add a blue background, like your video and let it float…

could work… another solution would be a vector animimation scaled for all devices.

just a thought. <3