I’m stuck on creating a hero section in front a background video, I have made a lottie animation with transparent icons. the problem here is that I cant get the lottie file to be responsive, the same as a image would be. I could use canvas, but then it is not transparent anymore but black. so that is not a solution here I think. i want to use grid to properly set the text an the lottie file, but then the lottie file doesn’t fill up the div with white space, and setting a background color to white would also remove the transparency effect.
I’m having a tough time understanding what exactly you’re trying to achieve, do you wish to have a video behind a text element and a lottie animation? Or something else entirely different?
I want the hero to be white at a VH- of 85, so you’ll see a bit of the background video under the hero. but I want my animation the be ‘‘cutted-out’’ / ‘‘mask’’ the background video. the only problem is when I resize the screen and try it other devices the lottie animation stretches.
i want the changing logos to be responsive like a normal block would.
In your website i see a bit of the background video playing below the hero section and i also see that same background video playing (masked) through the animation. I’m assuming this is correct?
However, when i resize the browser window, the lottie animation gets cut off, because you have a fixed width value of 1000px. You could try to set a VW value that would make the animation responsive depending on the screen resolution.