Relume Community Icon

Join the Community

Issues with Implementing Snap Effect in Webflow Layout513 Images | Relume Community

Issues with Implementing Snap Effect in Webflow Layout513 Images

·

Hello, I am currently trying to modify Layout513. By default, the images in Layout513 smoothly scroll through, but I want to add a snap effect for each image. Therefore, I set the layout513_image-wrapper (i gave it the color red) to a height of 130vh instead of 100vh and set it to sticky and the image inside has a height of 100vh. It works as intended for the most part, except for the last image, which scrolls through as before without snapping, and I don't know why this is happening because I'm relatively new to Webflow and Relume. I suspect the problem lies with layout513_content. This div is also set to sticky and is being pulled up by layout513_component, which in turn pulls up the entire section after the last image has scrolled through. I believe this neutralizes my sticky setting for the last image, but that's just my assumption. I would be very grateful if someone could explain where the problem might be and whether there is a simple solution for it. here is the link to my webflow testing-project: https://preview.webflow.com/preview/relume-testing-site-27bb8c?utm_medium=preview_link&utm_source=designer&utm_content=relume-testing-site-27bb8c&preview=40e980925d51efc2f8ab18f35ceca6dd&workflow=preview and the published site: https://relume-testing-site-27bb8c.webflow.io/

9 comments

Matt J.
·
Christian B. curious - would having 100vh for both the image-wrapper and the other div give you the intended result? Why 130 for one and 100 for another?
Christian B.
·
thanks for your quick response. I don't quite understand—the sticky image needs a larger container in which it can move. If an image or the div has 100vh and its parent container has 130vh, then the image has 30vh to move. It actually works just as I want it to. My problem is with the last image—there, the sticky effect simply doesn't work. The last image doesn't move, and I don't understand why.
Matt J.
·
Christian B. yeah true - so we could look at the 130vh has like the "track" for the sticky - is it possible the track is too short? What about extending the 130vh to say 160vh?
Christian B.
·
That's not the problem because all four images (100vh) and their parent div (130vh) have the same classes, and the sticky effect works as intended for every image except the last one. It doesn't matter how many images are in the content_gallery, it always fails to work for the last image, and I don't understand why.
Christian B.
·
Matt J. Hello, perhaps you could take a moment to look at my issue again, as I would really like to use this component for a client project. Thank you very much.
Matt J.
·
Christian B. can you provide an example anywhere on the web where the last item of a scrolling section is sticky?
Christian B.
·
I'm sorry, I'm still new, so it's a bit difficult for me to explain my problem. Maybe you could just quickly scroll through my example page, then you'll quickly notice that the last image in the section_layout513 behaves differently than the other images in this section, because unlike the others, it doesn't pause briefly but runs directly through. And since you asked me for an example where the last image is also sticky, I couldn't find one quickly, so I built an example. It's the section_demonstration right below the section_layout513, where all the images behave the same, including the last image. That's why I believe my problem is caused by some setting in the component layout513. I hope you now understand my problem, and maybe you know a solution. Here are the links to the page again, thanks for your time: Published link: https://relume-testing-site-27bb8c.webflow.io/ Webflow link: https://preview.webflow.com/preview/relume-testing-site-27bb8c?utm_medium=preview_link&utm_source=designer&utm_content=relume-testing-site-27bb8c&preview=40e980925d51efc2f8ab18f35ceca6dd&workflow=preview
Matt J.
·
Christian B. thanks for all that - I would try turning on this setting - the new overflow clip:
Christian B.
·
I think that wasn't it, but I think I've discovered the problem. The div containing the sticky elements has a height of calc(100vh - 10rem), and I believe that's causing the issues. However, I've found another solution. I combined the components layout513 and layout420, and that gave me the desired result. https://test-layout-513.webflow.io/ But still, thank you for your patience and help.