https://cruip-tutorials.vercel.app/sticky-scrolling/
I have not been able to properly create this. Please help!
Here is my public share link: LINK
(how to access public share link)
This is a scroll interaction
I know but I just cant seem to get it like the example i’ve shared :(
I checked out your share link but there’s no work showing where you’re stuck so thought you were at square one. Just to make sure, is this the correct project you’ve shared?
there’s custom code in the inside tag
Ah ok. sorry I can’t really help with that. I’m more familiar doing these things using Webflow’s native scroll interaction. Non-custom-code method.
ok. i removed the custom code and added a simple text and image section. I would really be grateful if you could help in any way. I am just completely stuck
Better to use Webflow University really. The first link I sent.
Overall, this is a good quick guide to get the concept. The sample shows an image size change within the scroll but yours will be using display + scale + opacity on the changing elements.
Your scroll interaction will be controlled by a trigger wrapper div.
Inside of the wrapper will be your sticky track div.
Inside of the track div will be each of your informational “slides”
- The sample you’ve provided appears to have 100vh sections at the top and the bottom saying scroll down and scroll up. These are not sticky and are able to scroll freely.
- The informational “slides” are inside of the track
- Each of your slides will have a height value of 100vh. You have 5 slides so your track will be 500vh
- design each slide, ensuring that the alignment on each matches the next.
- Make sure that your track’s position is set to sticky. Review the sticky property if you don’t know how that works.
- Set the slides to absolute or fixed positioning and you can stack them by applying the appropriate z-index (all of the slides should now be overlapping each other)
- The rest of the control is applied through the “when scrolling” interaction applied to your trigger wrapper. Your trigger will tell each slide (or element) when to appear or disappear
again, this is the overall idea. lots of tuning depending on your design. You’ll notice on mobile views, your sample switches back to a regular stacked layout. To do this, you’ll just change the “slides” back to regular positioning and they’ll stack again.
how is this looking so far?
https://preview.webflow.com/preview/sticky-scroll-reveal-f387a7?utm_medium=preview_link&utm_source=dashboard&utm_content=sticky-scroll-reveal-f387a7&preview=e06fadb7beec3ae2659f6f2dc485ef0e&workflow=preview
I don’t see the interaction applied.
Your DOM structure should look more like the screen shot below.
Per forum rules, I won’t dive into subjects outside of the scroll interaction but you have numerous layout issues, unneeded elements and settings that seem to come out of nowhere. I highly suggest going through lessons at Webflow University before getting into more complex things like scroll interactions. I’d be typing here for days :)
1 Like