Hello!
I’m trying to mimic this preloader animation (the animation covering all the screen and then resizing to the final size) on @Dylan_Brouwer Webflow’s site (Dylan Brouwer Portfolio - Webflow), and I can’t hit it.
Does anyone have any clue or idea on how to set this? Any help is welcome (even from Dylan itself, lol).
Thank you in advance,
V.
PS: I’ve started using Webflow recently, and I’m linking it a lot so far!
Hello @Vins_Rubio
I believe the animation is a Lottie animation. Then I believe it is just being resized into the page with an interaction.
Hello @Smith-Cordell ,
Thank you for the so-quick answer!
I have a Lottie animation myself (“png” in my case). I’m trying to set this animation I want as a preloader (I don’t know if this is the correct approach, tho). I’ve found so far that preloaders have to be set as “fixed” position to cover the whole screen, and when I’m trying to resize them, I have a lot of problems because it covers part of my other content. Setting overflow to “hidden” on the content block of the animation doesn’t seem to work (because of the fixed position?).
I guess I could resize the animation in AE, but I wonder if there is a better solution!
Thank you again,
V.
Hi @Vins_Rubio
You could set the body to overflow hidden which would prevent scrolling while the preloader is on and then set it to overflow visible after. Then you would be able to make your Lottie position absolute size 100vw and 100vh changing to 100% of its container.
Hope that helps
Can you change overflow settings depending on animations? How?
The body’s overflow is set to “hidden” now because of what you said. I ideated the Home page not scrollable for not having this problem. So I guess there is no problem there?
I’m trying what you’re saying, but I think I do not understand the whole thing. Maybe it’s my problem because I did not explain it properly! Let me try again:
My Lottie animation is inside a grid set up like this:
The body overflow is set as “hidden.”
The Lottie animation is now set to “absolute” with 100vw and 100vh, as you said, of the grid container.
If I click hidden in the grid overflow, the animation triggers inside the grid, and it doesn’t show what I want.
I’m starting with Webflow, I’m sorry to give you that much trouble 
Thank you,
V.
No problem. I’ll try and elaborate.
No, you can’t set overflow natively in Webflow interactions, but you can do it with a little custom code if you wanted to.
The Lottie animation would need to be full screen initially with position absolute. you could then change the position.
If you want to send over a read-only link, I can try it out and explain all the steps
Sure! I’ve never done this before. The page is “Home 2.” I think this is the link: https://preview.webflow.com/preview/vins-rubio-portfolio?utm_medium=preview_link&utm_source=designer&utm_content=vins-rubio-portfolio&preview=e7a1b4cacdddc29c67131ec27d386663&pageId=625d8d9a9d940e8f2c9612f6&workflow=preview
Tell me if it works!
V.
Ok, In Dylan’s example. He is sizing by the screen percentage. His video is 100vw wide and then changes to 67vw wide. The content on the right is 33vw wide and slides in as the Lottie shrinks. The Lottie is display block and therefore part of the document flow.
He then sized the nav and bottom bar with vh. The navbar starts off moved up by its height and the Lottie also is moved up. They both move down by the value of the nav bar’s height in the interaction.
You could easily replicate this if you were to design with vw and vh.
As for stopping scroll while your preloader is running, you could use a script like this:
<script>
setTimeout(function() {
$('body').removeClass('intro-no-scroll');
}, 3000);
</script>
Add a class called intro-no-scroll to your body and set it to overflow none. The script will remove the class after a defined time which will set the body to overflow again. The time is set in miliseconds — in this case, 3000 milliseconds.
Hope that helps a bit more
So detailed! 
Thanks a lot! I will study what you’re saying and try to apply ASAP because I have to understand the whole thing first. I’m going to sweat on this one 
Thank you again; I so much appreciate it!
V.
Hello @Smith-Cordell!
Here I am, again.
Thanks to your advice, I managed to do a pretty acquired website for what I had in mind and Figma. I managed to make it work (more or less) as I wanted at every breakpoint. I launched the web (my very first portfolio), and everything crashed 
I added every breakpoint in Webflow and added the one my mac has (since it’s not in there. 1792px, I believe). It changes everything depending on if I use Chrome/Safari windowed or fullscreen. I know by hand that my Webflow construction skills aren’t good since I’m new to the platform, but omg, it doesn’t work at all, haha.
So now I don’t know exactly what to do. Kind of devastated here. I’m guessing the major issues are with the absolute/relative positions and maybe the % sizes? I don’t know!
What do I do? How do I solve this? I’m also thinking of hiring someone to solve this for me and, at least, launch my portfolio ASAP.
Thank you, and sorry for the long text!
V.
PS: this is the portfolio: www.vinsrubio.com
Hi @Vins_Rubio!
Just bumped into this post. Sorry that I haven’t seen this before. Glad @Smith-Cordell helped you out. All solved now? Great to see that my preloader inspired you 