Hello!
I’ve been stuck on this one and can’t figure it out.
I’ve created a first section, once the user scrolls and it goes out of screen, it should scroll back.
This works but somehow that animation skips section 2 and goes straight to 3.
Hope that made sense. Could someone please help me?
Thank you!
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hello @kwievu,
I’m having a hard time understanding your problem. What animation are you talking about? the navbar animation?
Hello Pablo! Thank you for responding.
I’m trying to make this animation http://studioaves.com/ when you start up the site.
You can scroll to the second section, but you can’t scroll back is what i’m trying to do.
Thanks!
Hello @kwievu,
I got it now, thanks for clarifying. So, for something like that, you have to do an interaction when the page loads. Create you first section and then hide it, using either opacity or hide/show, so then your second section becomes your first section. It is kind of like creating a full screen modal. I hope this helps. Let me know how it goes.
Hello Pablo,
Thanks for answering and sorry for the late reply.
I’ve tried this but I think i am doing it wrong.
Would you know if i can find a tutorial on this somewhere?
Thanks!
Hello @kwievu,
Have you tried the webflow youtube page? they have tons of tutorials, either there or at the pixel geek youtube page. Good luck!
Yes i’ve also cloned a few of people their project but i just can’t seem to figure it out how they did it.
thanks!
can you share your read only link?
Thank you for looking!
I’ve deleted that animation on the layer, but it is still in my animations pannel.
So i’m trying the exact same thing as i send you from studio aves. Second section scrolls over first section, first section is gone.
Thank you!
Hello @kwievu,
I think this tutorial will help you How to Webflow: Full screen menu - Tutorial (2019) - YouTube what you need to do instead is to use a hide/show animation when scrolled down instead of the click animation used in the tutorial. You will need to use the the custom code to prevent your page from scrolling while the first section is scrolled down. Let me know how it goes.
Hello, thanks for the help Pablo.
I understand the tutorial and how this could help me, but when implementing this I don’t think i’m doing the right thing. Also when using hide/show, my sections “jump” because suddenly the first section is gone, so instead of showing me the second section, it goes straight to the third.
Thank you.
Hello @kwievu,
Sorry for the late reply, I see what you are saying about the “jump”, that is why you need the no scroll code from the tutorial. Let me check the costume code that studioaves uses with a little bit more time and I will get back to you if I find the answer.
That would be great Pablo, thank you so much!
Hello @kwievu,
So I have an answer for you. It would not be too easy to implement on your current site though. I looked at the script that studioaves uses on their site and found out that they use some java script to change the classes of their body and other elements to allow the no scroll effect of their initial interaction. I can’t test it with your site, because I can’t publish it, doing it with webflow costume code didn’t work on my end, and I’m not sure exactly why. However, I managed to duplicate the effect natively with webflow. Here is the result http://webflowaiga.webflow.io/scrolling. It is a css trick that I found on the forum, it is a little hard to implement but it works great, even on mobile. So here is the read only link so you can take a look at what you have to do on your website. https://preview.webflow.com/preview/webflowaiga?utm_medium=preview_link&utm_source=designer&utm_content=webflowaiga&preview=0b862ed89ef5e668a46a531122c2395a&pageId=5de02b19b1a94e95ce70f152&mode=preview
Basically you have to set your body’s height to 100%-add a section with a height of 100% and an overflow of auto- place the rest of your content inside, then after add a div block with you intro content and with a size animation make it disappear. I hope this helps. Let me know if you have any questions.
@Pablo_Cortes Hey Pablo, do you mind sharing the custom code again? Thank you 
Hello @osied,
There was no custom code at all on the answer above. What are you trying to replicate?
No worries, I got it, Thank you @Pablo_Cortes
Sorry if my question bother you. How do you create lazyload image for your website?