Swap Content on Scroll in Webflow

In this tutorial, we'll learn how to create a tab-like interaction on scroll in Webflow using attributes.
Get the cloneable for this project (affiliate link)
webflow.grsm.io/content-scroll
Timestamps:
00:29 - Initial setup
02:20 - Styling the is-active classes
04:16 - Setting up while scrolling interactions
06:23 - Show number progress
06:44 - Setting scroll anchors
06:58 - Applying scroll snapping
07:28 - Disabling interaction on mobile
09:12 - Second component attributes
10:04 - Second component animations
11:28 - Title slide animation
Join my Webflow Wizards Community
/ timothyricks
Try Webflow using my affiliate link below.
webflow.grsm.io/4840096

[@shayanzaidi2836]

Love the new look, Tim! Everyone knows you're a webflow legend but it's not said enough how good of a designer you are too. Thank you so much for your content

[@system2213]

Well said. Tim is the gold standard for webflow tutorials. It's insanely rare for one individual to be so good at 4 complementary skills (Webflow/Code/Design/Teaching). We hit the jackpot with this guy. Loads of great content on his Patreon too.. definitely take a look if you can afford a few bucks a month.

[@labruda]

Always amazed by your tutorials! You prove that nothing is impossible to do! Thanks Tim

[@arvid_music]

First video I've seen from you. Thanks for the tutorial, straightforward and a really great help for the project I'm working on. Much appreciated!

[@HORDERARII]

🎉WOW I’m inspired to work on my own portfolio with such animations. Thanks Tim

[@austinandriese]

This is EXACTLY what I was looking for. I knew you'd be the one to make this Tim :) My design is very different but the idea is the same. Will share when It's done.

[@Jabez_Sam]

thank you so much man, you're a legend

[@toolatefortv]

Thanks for this Tim, not sure what it could be but there's a quick flicker after scrolling past the first section from pageload. This is the only time the flicker happens until reload of the page.

[@TheFlyingEpergne]

Damn this guy is next level

[@jelenajovanovic1472]

You are so genious......

[@system2213]

Hi Tim. I noticed that this one is setup similarly to your Flyreel clone, in that you are using a trigger div. On the Flyreel clone though, you have multiple trigger divs and use them to trigger webflow interactions which scrub your lottie animation to different points of the animation. Can that also be done on this one, so that different CMS items trigger scrubbing of a lottie file? I've been trying to get it working but there's only one trigger div so I'm finding it very difficult. Any pointers would be hugely appreciated!

[@cprainito]

Thanks so much for the awesome tutorial and all of your content, it is so helpful! I was wondering how to or if it's even possible to link/navigate to the "Plan, Design, Build" sections from a top nav? So, perhaps there's a bunch of content above the plan/design/build section and in the top nav there is a Parent link called "Our process" and a dropdown nav with "Design" "Plan" "Build". Would it be possible to jump to the anchored "Our process" section further down the page and then show whatever the user clicked on in the dropdown? E.g. Plan or Build. Hopefully I'm explaning myself properly 😬

[@SamyLibsig]

Hello! This tutorial really helped me. Thanks Timothy Ricks. I came here to ask if anyone got it to work with nested lists using finsweet attribute nest ? I have used nest to get my collection items but for some reason the script does not manage to count the children elements of the list. If anyone has an idea thank you very much

[@louistomlin4626]

This is amazing man!

[@conglo3650]

Hi Tim, it is posssible to change the photos when scroll? instead of having the exact 3 photos

[@uncertifiedloverpimp]

I am trying to do the with embedded code it's an i frame

[@lovejaszxx]

is it possible to modify this to scroll the content within content_list-item? and as you scroll to the bottom of that, it would switch to the next item

[@isanggrupoisangbaso]

Can you do this also in Wordpress (Elementor) ?

[@sinanouri5035]

what if we had the animation on mobile screen ? does this work on mobile browsers ?

[@cosmintudor4069]

Do you have any plans to do a persistent dark mode for webflow? Lots of people looking forward to this.

[@timothyricks]

Good question! I have a tutorial for that already in Patreon. www.patreon.com/posts/66950007

[@MultiSciGeek]

Gosh that's complicated. I just want my navbar to change colour (mainly the logo).

[@mastergamers6991]

Sir i need long projects on webflow plus figma

[@Alixer560]

Hey Tim, how do you get Webflow to look like that? I mean with the vivid blue and vivid purple colours when you select stuff in the sidebar?

[@timothyricks]

These are the new colors for WebFlow

[@invisiblehandofadamsmith]

👋👋👋👋

[@markjoncheff]

DOpe