Hello everyone,
I am hoping to finally find a solution to an issue I am facing right now.
I am working on a hero section that has a lottie as background, it takes the full width / height of the section and should be able to fit all viewports, at least on desktop.
Issue here is that lottie, as I am sure everyone here knows, are really difficult to make responsive.
Ideally, a solution would be making the lottie stick to the right side of the screen and whenever the screen es resized it expands/shrinks only from the left side, leaving the right side of it always visible, as there is where the animation is.
I’ve been trying so many different approaches to this that I am running out of ideas. I’ve tried with 16:9, 4:3 lotties and making the lottie super large on the width so it could shrink / expand limiting his viewport to 16:9, (if this makes any sense whatsoever), but this doesn’t work as at some point the lottie shrinks from both sides (left and right), cutting the lottie.
I’ve also tried the approach that our friend David has here, but it did not work for my approach.
Question is, is there a way that we can make the lottie only shrink from the left side? This way would work as the animation on the right would always be visible. Or maybe there is another approach to this?
I’ve created this test project with 2 possibles approaches. The one on the top is a flat 16:9, whilst the one below it is a 2500 x 1080.
Thanks to everyone.
Sam
Here is my site Read-Only: Webflow - tests