I really want to replicate a sticky scrolling section, where there is a sticky section on the left with, say, a 5 Step Process. Instead of having this take up that much screen space top to bottom, I’d rather the section stay put, and then the content changes per step (and the title on the left changes respectively).
A website that does this effect I have in mind really well is https://www.ymugroup.com/. I am referring to the “Commercial” section on this website specifically.
I opened their website up in Webflow but cannot figure it out for the life of me. Any guidance and help is greatly appreciated!
Hey @mjcensullo - just my first thoughts here. Have you tried following this tutorial from Webflow and then adding a scrolling interaction to the titles you place in the sidebar. For example, when Step 2’s container is scrolled into view, you make the step 2 title bold.
Hey there @myonke - thank you for your reply & suggestion! I’ll definitely give that a go and see if I can get it work properly. I come from page builders like divi & elementor, and this is my first Webflow site. I love the creative potential, I am just trying to learn all the technical stuff.
I saw that I was supposed to share it but opted not to only because it’s no where near complete, and I haven’t started to build out the section I have posted about.
The website started from a template, so my classes are a mess.
Hey there @mjcensullo - let me know if trying out that tutorial + the scrolling interaction works. I could take a harder look at it later this week perhaps if you get stuck, so please lmk. Also, the link you shared is not your share link; the share link is one that allows others to open your project in the editor (but we can’t make actual changes to your project, don’t worry). This link should show you exactly how to share the link from your project settings:
@mjcensullo - this isn’t the best how-to screenshare I have made haha, but hopefully this will get you started until I can make a better one (was kind of winging it). Let me know if you have any specific questions after watching, and I will try to address them in my next screenshare. The main thing that I made messy in this screenshare is when the titles on the left actually become “active”. I would need to play with the interaction trigger a little more to get it perfect.
Hey @myonke, sorry I haven’t got back to you until now. I just got around to working on this section this morning and I had some good success following your video – thanks for that!
I think my paragraph text is going to be short, 2 short paragraphs at most. You’ll notice that since more than one Step is in view at a time, there are always more than one header that is bold at a given time.
Any thoughts on how I can make it so just the step 1 content is viewable, and then step 2 becomes visible at a certain point?
@mjcensullo - you could put the content of each step (the paragraph you mentioned for example) inside of a div block and give that div block a height of say 75vh (viewport height).
Nice that worked thank you! The previous steps that have already scrolled by remain bold for a little, even after they are scrolled out of the viewport, but a great improvement so far!
