How to Webflow: Switch content with scrolling interactions - Tutorial (2019)

This was a fun little challenge that I immediately took on to help Hemen.
Inspiration site:
level.co/
Clone this project for free:
webflow.com/website/content-s...
Join the Designership:
thedesignership.com/
#webflow #webdesign #tutorial
Join the Pixel Geek Community:
pixelgeek.community
-------
I've been a web designer since 1995 and I've learned a lot about this industry. Now that I've found my dream job at Webflow, I want to share some of my experiences and knowledge with you in hopes you can find your dream job as well.
The purpose for this channel is to help you design and build better websites, learn more about the business of web design, and empower you to inspire others in this unique creative industry.
-------
Like what you see? Subscribe here:
kzbin.info_...
-------
/ thepixelgeek
/ pxlgk
pixelgeek.co

[@kelvineff]

Great stuff as always! Is there any layout / site that you find as the most challenging to do in Webflow?

[@pixelgeek]

My own portfolio site. It's never good enough 😅

[@kelvineff]

@@pixelgeek That doesn't count, your site is on Webflow! But yeah, I feel you... :D

[@alexhartan]

@@pixelgeek I second that

[@tomqwen]

@@pixelgeek I can sympathise with this!

[@yumaheymans]

THANK YOU SO MUCH!!!! I've been working nights to fix this. You're awesome.

[@bobweishar3221]

Super helpful - just came across this and was exactly what I was looking for. Keep up the great work!

[@tenpassang164]

Thank you, it just makes web flow more fun.

[@TomaNeagu]

You are a lifesaver! Thank you for the upload!

[@alanjohnson6477]

Hey, buddy! I'm deep diving into Webflow and I wanted to reach out and let you know your videos are some of the most helpful I've found yet. Thanks for not ever fast forwarding even through repetitive moments, and your explanations are really precise, and to the point. I really appreciate your work and can't wait to see your future videos. Subscribed. Thanks so much for doing what you do!!

[@pixelgeek]

I appreciate that! I try to keep things as honest as possible.

[@hcorneliusson2424]

The animations are a real puzzle to me, but you helped me figure it out, or well, you showed me. Just to follow along , you great man!!

[@pixelgeek]

glad I can help :D

[@jh8691]

WHY IS YOUR CHANNEL UNDERRATED ITS THE BEST TUTORIAL SITE EVER. YOU SHOULD TAKE OVER WEBFLOW TUTORIAL UNIVERSITY

[@TomaNeagu]

+1

[@alexhartan]

This is exactly what I needed for my page. Excellent content and thanks for sharing it!

[@pixelgeek]

my pleasure :) Thanks for watching.

[@Faint52]

This helped me understand sticky better.

[@pixelgeek]

i'm glad this helped :)

[@justaprimate6309]

Very cool and easy to follow, thanks. Think these are so much easier to follow along with than the live streams. Do love the live streams too :)

[@snarfmaster2]

Thank you. Concise and thorough. Much appreciated.

[@carm1301]

This is awesome! I am learning so much from your tutorials (I'm rather new to Webflow). Thank you so much! :)

[@pixelgeek]

Thanks for watching. I'm glad these videos are helping you. 😁👍

[@XPilotP]

man thank you so much for this video. exactly what i needed.

[@raynalreyes4907]

Another great video, such useful info Nelson, you're a rockstar!

[@pixelgeek]

I appreciate that!

[@miljanmaksimovic3911]

you helped me a lot. Thanks bro!

[@BezUmiaru]

Amazing as usual!

[@Merwok]

I was looking for this exact style of animation! Thank you for making this tutorial - you explain it so well (and I can finally understand why my div was sticking to body aha!)

[@pixelgeek]

Glad I can help 😁👍

[@nicolasmarquez5956]

Duplicate class? I've been using webflow since 2015 and I didn't know that... that is going to save me so much time when animating elements! Thank you for giving such a great tutorials

[@pixelgeek]

Glad I could help!

[@1992kiddi]

Thanks Nelson you are amazing.

[@MHdAyyoob]

this is the real stuff i want. thank you for the video and much love

[@pixelgeek]

You're so welcome!

[@jclewis33]

Thanks. Awesome tutorial

[@christopherklaich55]

how do you deal with this in mobile view??

[@digitallyrooted]

Thank you for the great step-by-step tutorial!

[@pixelgeek]

Glad it was helpful!

[@aprodan5245]

So dope! I love your channel!

[@pixelgeek]

thanks for your support! :D

[@tomqwen]

Great stuff as always! I'd have spent ages trying to work this out before realising how simply it could be achieved

[@pixelgeek]

yay! :D Glad this video helped you out.

[@justaprimate6309]

@@pixelgeek Seems that so much time will be given to the interactions rather than the actually building of the site :)

[@jtkapow]

Lifesaver! Thank you!

[@pixelgeek]

You're welcome!

[@MadhuSudhan-te7li]

Awesome Excellent tutorial

[@radical3999]

Hey Nelson, Not sure if it's just me, but offset of Content 1 OUT should be 0%. Otherwise, "Content 1" disappears and it appears only if you scroll to the bottom and go back again.

[@pixelgeek]

Oooo good point. I’ll look into this tonight. Thanks for the heads up :)

[@therock88]

Wow amazing video So much value .... thnx a lot

[@pixelgeek]

My pleasure 😊

[@waroakawa]

thank u so much

[@uiuxlearner1769]

Thanks man

[@diegoamendoza734]

Loved this advices from you man, awesome content. I just have one question, how would you use this interaction to perform well on the smaller devices? because it ends up looking too tight, and if I change it, it ends up messing the way it looks in bigger devices.

[@rasheedhoosen9737]

thanks man !!!!

[@pixelgeek]

Happy to help

[@DannyManny267]

this is awesome and saved me a lot of time. how would you optimize it for mobile version? thank you

[@ben_habib]

Awesome video!! I'm wondering how you might do this for only having 1 column (being the changing text). So as you scroll, the text changes. Thank you!

[@justaprimate6309]

Guess you can use the same principle for scrolling left to right as in horizontal scrolling too. Must have a wee play to see what is possible.

[@amitgarg2419]

Great tutorial. Is it possible to do this with Content tied to the CMS?

[@yumaheymans]

@pixelgeek do you have the cloneable? Thanks!

[@pietrolago]

That's super nice, thanks! 👏🏻

[@pixelgeek]

No problem!

[@joshhighburger8869]

Such a simple and useful tutorial, so many ways this knowledge could be used! Never thought of using two side-by-side divs as columns rather than a section/div set to column, kinda blew my mind... most things I'm working on right now I use the "while scrolling in view" rather than "scroll into view," are there any obvious issues down the road that could arise from using scroll-based interactions vs triggered timed interactions?

[@pixelgeek]

while scrolling into view is good for animations that you want to happen while scrolling. Scrolling into view is good for animations that you want to happen at certain "checkpoints". Just mess around with each to figure out which works best for the design at hand :)

[@ryanenglish8097]

I cant believe how applicable this still is over a year later. Hey Nelson, do you have any recommendations on how to make this adaptable for mobile?

[@chrisrosch4731]

isn't it working like that on mobile too?

[@saskiaoschwald8574]

Great Tutorial. It helped me a lot with my project. But somehow when i put embed code into the content box, the interaction doesn't work anymore. Its a external hosted html i embeded with and when i just put it in some Divbox the code works just fine. Any idea why this is happening?

[@1992kiddi]

Nelson there is a small bug in this, I even checked your clone, to generate slowly scroll from content 2 to content 1 and keep scroll up until it fades out, when it does scroll within photo 1 and right side will stay blank until you up top and scroll back down.

[@juliaanderson914]

This works great except for when I add links to any of the content divs. Why are the link blocks not following any of the interactions (even if everything else is?)

[@romulusignat2155]

If this content was a CMS collection how can I achieve this? Seems a little tricky.

[@moksh8]

Really cool! I also noticed that in the ref site - it does look like a slider due to the 3 dots and wondering if they’re responsive. If so then ?

[@pixelgeek]

you can add those "dots" in as their own layer and switch the opacity of each dot based on the scroll-into-view interaction trigger. Just use the same things learned from this video on those dots. :)

[@uncleanAlibertine1]

funny.... I saw this doing the same thing in much easier web builder ( with much more work and code!!) where in webflow is done without a single code!

[@yamammiwammi]

as soon as i add the photo divs, the divs don't fit within column 1 (they spill over into the section below)...why? I keep checking and checking and i have no idea why they can't contain within the column 1

[@AaaBbb-lp8wi]

Hi. I tried to follow your steps and its went well but when I scroll back to photo 1 - the content disappears!

[@FedCon-bz5oj]

Hey I know my comment is late but for some reason this isn't working for me. The column 1 div just isn't sticking the way that it should be. Does anyone know why?

[@vincybadman871]

This is great, but is there a way I don't have to adjust the animation for every single on? (I have a 26 item list that's tied to a CMS, so a new item will be added weekly)

[@darshildixit3438]

Hey there! Have you found the solution for that?

[@TheSocialDancers]

I've followed the tutorial to a T but my right section won't stick :'( Anyone else have this issue?

[@humenai]

Hey Nelson, so I did this and then later realized I wanted a button for each separate section. So I added it into the content section but it doesn't seem to recognize the buttons other than the last 1 when published? Any suggestions?

[@davood1975]

Have exactly the same issue. I add 3 buttons , ut only one is working , any suggestions ?

[@arshdeepsingh4175]

hi, is it still possible to do in 2024? i see you have removed the option to clone your peoject

[@sundaytalk1930]

hi webflow guru, How I can add a multiple language bottom in webflow? thank you ....

[@pixelgeek]

this might help :) www.translate-wf.com/

[@vinisha7796]

the link you provided is not clonable

[@keithdickson5877]

Love this tutorial. Thanks so much. I've rebuilt this in a site, but can't seem to make it work backwards. So that when I scroll down the page, the interaction works fine. but when I scroll back up the page, the interaction does not work. What might I be doing wrong?

[@pixelgeek]

can you please post your read-only link?

[@keithdickson5877]

The interaction is on the "About Us" page. Thanks so much!

[@vicmoreira7161]

Did you ever get a solution for this? I'm running into the same problem

[@keithdickson5877]

@@vicmoreira7161 Never did. I had to abandon the feature.

[@keithdickson5877]

@@vicmoreira7161 I have the hardest time with interactions.

[@aleexious2466]

How to apply animation on text. I mean i want to fill-up the text with another color while scrolling. Help me.

[@pixelgeek]

I'll add this to my list. 😁👍

[@aleexious2466]

@@pixelgeek is it possible in webflow?

[@pixelgeek]

Yes

[@IbnEYasin]

I can't clone the project

[@SebastianOlesko]

Lovely, just wondering how to translate that to mobile/responsive. On the level.co site it becomes a simple slider. So the solution is maybe to bild a slider and make it visible just on mobile and not on other screens?

[@pixelgeek]

Yup. Exactly what I was thinking.

[@tomb5839]

When you scroll back up to the top section, Content 1 disappears because of the Photo 1 Out action. How do you stop this happening? thanks

[@tomb5839]

I worked it out. Remove Photo 1 Out animation. It gets covered up anyway.

[@pixelgeek]

great idea! :) Glad you were able to find a work around.

[@smashkirk]

@@tomb5839 This reply saved me, thanks!

[@ceciliadejesus328]

no longer cloneable?

[@danielaalvarez8543]

Hi, what is the name of the slack channel I'd love to be invited

[@pixelgeek]

sign up here and i'll send you an invite soon :) pg-community.webflow.io

[@zixidboy]

Why does Content 1 disappear after I scroll back from Content 2? prnt.sc/q5tgl7

[@pixelgeek]

seems like that only happens if you continually scroll up and down really fast and not give the javascript sometime to notice the "checkpoints"

[@zixidboy]

@@pixelgeek Thanks. Keep up the great work, it's amazing!

[@aerodylluk2543]

Omg you look like Asian. Chris Pratt!

[@danishhameed8799]

Hey pixelgeek, thanks for the tutorial man! I want to change the images to a list, but I'm having some issues presenting it the way I want. I'm trying to copy this page: designpickle.com/essentials/. You will find the section in question under the 'You're In Good Company' section of the page. Any tips my bro? I want to copy how the list on the left of the section highlights when the sticky element highlights the content. You will know what I mean when you see it. Looking forward to your response!

[@Skills1994]

baaaaaaaaaaaaaaad

[@sumaiyahabib1572]

how to make it responsive?