The Best Method of Scroll Snapping! Easy Webflow Interactions

[@ghadaben7571]

With questionable knowledge in code, I've been trying for the past 3 days to get it right for my portfolio ! it worked and it's amazing! Cheers and hope to see some more tutorials!

[@anansicreative4068]

That’s great to hear!! Cheers!

[@g4b3TehDalek]

Wow! Ingenious!! I had tried Scrollify but it was very jittery. This is exactly what I needed. You are incredible and your tutorial was very easy to follow. Thank you!!

[@SepulvedaCarlos]

I loved this method! thank you so much!

[@sethtyson1047]

Thanks this is great! I've noticed if I put a menu on the page linking to sections it won't go to those sections in the scroll snap wrapper. But it does if I turn overflow scroll off. But then obviously this doesn't work. Any idea how to get a menu linked to the sections working?

[@O4SYT]

Having the same problem

[@marindelval]

Same for me, did you guys find a solution?

[@utkcht]

same problem here. Any solutions?

[@petrapc]

Another one facing this issue. Has anyone found a workaround?

[@aloha2713]

Hey, please don’t let us hang with this

[@numode]

Top stuff ! Easy and calmly explained.

[@neoniquestudio]

Such a great tip! This scrolling is much smoother than the scrollify script! However, I´ve realized that with this setup the "While Page is Scrolling"-Interactions are not working anymore in Webflow. Probably because since everything is within the snap wrapper, we are actually not really scrolling anymore. Am I right? Any solutions maybe? Thanks a lot! 🙏🏼 Manuel

[@secondbfast]

hey manuel, did you ever find a solution to this? just ran into this problem myself.

[@bronkowich]

@@secondbfast same here

[@noflff]

I have implemented all your code. Great and works fine! Thank you for the video. But now in webflow and the browser I see the side and bottom scrollbar. I saw your code to remove them but I don't know where I have to place the code. Again in an embed HTML or somewhere else ?

[@thronetothorns]

Amazing! Wish this video came out ages ago. Thank you.

[@anansicreative4068]

You’re welcome, thanks for watching!!

[@topulity11]

Thank you so much! It all worked like dream. I'm so happy to see it look so cool also on mobile devices

[@raerickson3470]

Thank you for this tutorial - working great for my site!

[@AndreasSiljuk]

Bro, you're the best! Thx for that one. I also used scrollify before and it felt kind of clumsy. but this is smoooooth ;)

[@todd_bracher]

Having trouble this code playing nicely with background transitions on a mobile. Any issues on your end as so?

[@thierryrolin7445]

Wow! Unbelievably light :) Thanks

[@XPilotP]

Hi, Im having problem. My link texts dont work. i want to click on a heading that scrolls to a section. but once I create the scroll-snap-wrapper under the body, it doesnt work. any idea??

[@XPilotP]

it has to do with the overflow scroll option. any idea on a work around

[@anansicreative4068]

Take a look at this, it may solve your problem. Even though it says safari doesn't support it, it works in safari for me www.w3schools.com/howto/howto_css_smooth_scroll.asp#section1

[@plinyelder8156]

@@XPilotP Were you able to figure it out?

[@XPilotP]

Pliny Elder no unfortunately

[@tbaproduktion5752]

same problem here... i do html first time and can´t find the problem.

[@snarfmaster2]

Very helpful and thorough. Thank you.

[@ZorroBlancoMX]

Nice! I'll try this on my next website Thank you!

[@X5gYVzwfLEMUX1H6z3eoJm]

Nice tutorial, not too fast not too slow either! :) I tried this, but it gave me a problem when scrolling using mousewheel, it's too fast that causing me to skip one section, and the transition also looks very rough! But the snap works fine like you showed in your video, when using touchpad or scroll bar tho.. Could you advise how to tackle this issue? do we need to use javascript to control mousewheel detection (if there's any way to do so), or this issue can actually be handled using css? thanks in advance!

[@adilM_]

same problem for me ... mousewheel is evil

[@keenanlam_]

Hey! Great tutorial - it works for the most part for me! One question, the effect is only working on the last 2 sections of the 3 I've created. I created a landing-page section a while ago, came across this tutorial today and proceeded to drag in the already created landing-page section into the scroll-snap-wrapper. I then created my extra 2 sections. When I set the overflow to scroll, the visible scroll bar comes up on side of the last 2 sections, and not the first. So what happens is, is my landing page doesn't snap scroll - when you manually scroll down and then move the cursor onto the 2nd section, the landing page stays exactly where it is, and then the 2nd and 3rd section snap scroll and work fine. But I always see a part of the landing-page section, unless my cursor goes onto landing-page, and scroll all the way up to remove it. Any guesses on what's going on here? Thanks!

[@anansicreative4068]

I’m not sure what would cause something like that, if you’re comfortable sharing a read only link I’d like to take a look at it

[@helenapostigo]

Thank you! How do I disable it for mobile?

[@Wellgraf]

This is excellent! Great tutorial too! 🔥

[@meaganpeters7178]

Thank you so much, this video was super helpful!!

[@Wildenfree]

A great & simple implementation! Very dope man, thank you. I do have a question which I'll probably reach out to you on Instagram for a bit of back & forth if you don't mind, but if you think it's simple enough & to help those here on the KZbin Channel I'll ask it here: Is it possible to use this inside of a CMS collection with the wrapper set to scroll & just the repeating CMS Item as a section inside? That would be super helpful if possible! 🙏🏾

[@udbhavschauhan]

This seems very helpful. Will surely implement. Thank you.

[@fazlu3706]

great toturial, may I ask how can we add current state navigation dots for each section?

[@chapen2397]

Awesome tutorial!! I tried this and i have a little delay snapping section to section whit the mousewheel what can i do to have instant snap?

[@philippquint]

Have the same problem. Does anyone has an answer?

[@thimotta]

That's amazing, and super simple. Thank you so much!

[@anansicreative4068]

You’re welcome, thanks for watching!!

[@brucewilson7163]

Excellent tutorial, thank you.

[@radswork]

Works perfectly on the laptop but not on mobile...what adjustments need to be made to either disable it on mobile or get it to work properly on mobile?

[@revaclay2734]

When I set my overflow scroll, It made my sections look small and created this little scroll bars that some websites have

[@markmorison949]

This is awesome. But this script stops all scroll interactions. Is there anyway I can use this with scroll animations. Thanks

[@nickygee2548]

I got the same issue :( according to webflow forums there is no fix for this

[@sprea1]

hero of the week !

[@ShuaiZhou1991]

Very useful! However, how to disable snapping on mobile devices? The vertical space is so limited

[@MrJengles]

Firstly, thanks for the tutorial, great work and such a simple and elegant way to implement it. I just wanted to check if anyone else has issues with it when viewing on safari? the page appears jumpy on mac, and just doesn't work on iOS...not sure why, or whether its my error.

[@rhysevans9493]

Is there a way to make sure it only scrolls to the next section? I notice that when I lightly scroll on my mouse pad, it goes to the next section, but if I were to scroll more intently (like someone who's trying to scan the page) it'll scroll right past the next section.

[@thejohnzapido]

Thank you for this!

[@MrbigglesworthyCoNz1]

This is awesome, thanks for sharing!

[@anansicreative4068]

You’re welcome, thanks for watching!!

[@petarlhs]

Thank you my friend, I set this perfect but I have one problem, before this I set up nav bar to pull me to down different section when I click buttons (about) (portfolio) (Contact us) ...Now this not working because of this :) but I wanna both things ....to pull me on section what I want when i click button and yout method ? THANK YOU

[@hsrcgjmw5dcsh87]

thank you! such a helpful tutorial!!! Is it possible to do the same in a collection list?

[@eivinj]

it works, but its insanely slow? using chrome and mouse with scrollwheel. is there any way to speed up the reaction?

[@philippquint]

I have the same issue. Did you found a solution for it?

[@carbonspark3326]

@@philippquint Hey, did you ever find a solution for this? Thanks!

[@matheuspires5022]

This is awesome, but disables any buttons/links to page sections, do you know a workaround?

[@erwank9240]

The method works perfectly in the designer and in the preview but on the live site on Chrome, it only allows me to scroll all the way to the first or the last section. It works just fine on edge desktop and Chrome mobile. Also, the arrows and the scroll bar are functional, the only problem is the scroll button on Chrome desktop.

[@CyanCooper]

I have another request! I use a lot of absolute-positioned graphics on my Webflow websites, but they're super difficult to mobile optimize because they radically change position as their relative parent element resizes, and you can't reliably set their size as a percentage that scales appropriately with different screen sizes. I've searched long and hard for a good solution to this, and can't find anything 🤷‍♂️

[@escapeplan3730]

first of all, thank you so much for this method. It's really much smoother and more beautiful compared to Scrollify. This method has a drawback: anchor links for navigating sections inside the page will not work. I think the reason for the problem is that the parent container should have a height of 100 vh. If you change the height to Auto, anchor links will work, but Scroll-Snap will stop working. Perhaps someone knows an elegant solution to this problem?

[@jcarlosache]

this method works for mobile?

[@escapeplan3730]

Thanks! This method is really better than scrollify. In addition, it works in preview mode. How can I disable it on the mobile version?

[@casperdeschuytter8883]

put it in a media query

[@escapeplan3730]

Thanks! Can you give me a little more detailed solution? Unfortunately, I'm not a programmer, but I can still copy and paste some code)

[@aloha2713]

Does it still work if the content of a section is larger then 100VH? And what about the other issues with the navigation or if it works for all brakepoints. I don’t like wasting my time with this to finde out that it doesn’t work.

[@iraklisvanidze8515]

hm for me thats not working like after scrolling on last section u cant continue scrolling on other elements/section that is after that wrapper like its a deadlock

[@CarlKho]

This disables my scrollwheel in the published version. Any solutions?

[@howuseehim]

Bro where r you at ? Come back man

[@theshivangigupta_in]

Love it:)

[@LicMarceloBrum]

Sweet! Thank you!!

[@filipdahlgren6386]

Great tutorial!:) I have a Question, Can you add a linkblock aswell if you would like to click and get to the right section instantly. ? My navlinks stopped working when implementing this scroll function:)

[@casperdeschuytter8883]

Already found a solution to this?

[@hussmohamad]

Great video, thank you so much. Although, I'm still trying to work out how to anchor link to sections. Is there a way to do this?

[@petrapc]

I'd like to know this too. Have you found a solution?

[@escapeplan3730]

brilliant! thanks

[@Ksenonksenon]

Thank you sooo much!

[@clementjonckheere]

Soo cool thanks for the tip !

[@anansicreative4068]

You’re welcome, thanks for watching!!

[@ArtSzabo]

Quick question: What classes would I put in place of '.your-class-here' in the disable scrollbar example, using the example you did in the video I mean. Great content! New Sub.

[@hannonsb]

In this case you would use '.scroll-snap-wrapper'. I also suggest putting a visual indication to the user that there is additional content (on scrolling). Edit: additional info

[@ArtSzabo]

@@hannonsb thanks! That clears it up

[@alienpilgrim1906]

Does this work on mobile view?

[@martinkstd]

It is really glitchy and have a delay. Help

[@ShutterlabCreative]

Would it be possible to do this horizontally on the x axis?

[@anansicreative4068]

Ya absolutely!! Just switch to x mandatory or x proximity. You can check out the different ways of using this here css-tricks.com/practical-css-scroll-snapping/

[@admiralsherlock8403]

Doesnt work with adblock on

[@plinyelder8156]

Love it

[@louwaars]

awesome

[@XPilotP]

the fact that you did this with so little code and no need for cms is insane. subscribed

[@anansicreative4068]

Much appreciated!!

[@deuay3143]

I did the exact thing and doesn't work

[@StankoBeronja]

very nice tutorial… question: how does this translate to mobile version? especialy when content stacks on top of each other? can it snap to stacked content or it snaps only to that defined section ?

[@alexhartan]

This method is really elegant, thanks for posting. However, today I see it's no longer working. Yesterday it was working fine, but today my project and your demo don't scroll at all. I'm running Chrome 85.0.4183.121 on Win10. Any idea why this might be happening?

[@projoker999]

Hello great solution! I have a question: is there a way to make the scroll more smooth and with added delay? My idea is to make it feel like a traditional scroll that snaps to the next section if the users scroll to a certain point (say 2/3 of the current section)

[@BSNsilviu]

LIMITATION: If I use this, I can't use triggers to link to elements on the page. Has anyone found a work around this?

[@ryang2723]

I'm looking for the same thing. Asked Webflow and reddit for help. Will get back to you if I find something.

[@J-0ne]

Hey thank you ! BUt is that technique possible with each section duplicated in a CMS collection on Webflow? (Sometimes embed code are not working well with CMS) did somebody tried?

[@markiscoolms]

It seems my scroll animations stopped working, is there a way to fix that?

[@ludovicocuomo3389]

i had the same issue,could you manage to fix it?....thanks

[@markiscoolms]

@@ludovicocuomo3389 sadly, no

[@Peeuf]

Very nice and easy, I noticed anchor links don't work with this method, any way that could make themn work? (clicking a link that would bring you straight to the top of one of the section)

[@tommystevenson3292]

Anansi Creative, thanks for sharing, I still can't get mine to work, do you have anywhere we can troubleshoot?

[@ordvir1595]

Hi the effect works perfect but when i put a navbar the links does not work, its not scrolling to the section when i press it and when its out of the scroll snap wrapper div it is working would you know why it is?

[@sprea1]

Hi, is this working if each section is in CMS? what would be the alternative code if the section is in cms.

[@aylavuoldireluna]

Thats was super helpful. Thank you very much.

[@akshaysingh548]

Great sutff man I'm your 1000th subscriber

[@Kai-fp3kd]

Brilliant!!! Looking forward to giving this a try! Thank you!

[@impactdigitalnz]

Thank you very much, so helpful!

[@Ludvio]

i have free plan and i cant use html embed.is there another way?

[@anansicreative4068]

Drop it into the within body tag custom code section in page settings, it will only work on a published site that way though

[@BobDavidson-fc3ks]

Is it possible to add a "back" and "forward" navigation button as well? I understand how to do a jump-to section-id - but I'm specifically looking for something backward/forward

[@petarlhs]

My navbar lost possibilty to jump to section when i put this? can you help me?

[@rajatkapoor4901]

Really helpful! thanka a lot

[@jaiquezhagood9722]

I love you and your music!

[@topemeister3000]

Awesome stuff. Thanks, bro

[@andreeaosanu8587]

You are my Savior!!!

[@ErlenMasson]

Nice one bro, will use on my portfolio

[@lauramansfield1930]

Such a clear tutorial thank you! Have you any experience in adding Scroll Into View animations when using scroll snap? I'm trying it now in Webflow, but for some reason only shows the animation on the first Section?

[@ramyakuchimanchi3246]

Same issue here!

[@hellofromthreetwentyfour9035]

Thanks for this! It worked great.

[@HeliumContent]

Thanks for sharing this great tutorial! I tried it, and it works, but there's a pretty big delay between when I scroll and when it snaps. Any tips for how I can decrease the delay? Thanks in advance.

[@anansicreative4068]

As of now, nothing that I know of but I’m looking into it further

[@HeliumContent]

@@anansicreative4068 thank you

[@philippquint]

@@anansicreative4068 I have the same issue. Did you found a solution for that?

[@pierreconstant1422]

hi man ! i have cloned your code, my only issue is that i cannot click on buttons to get to sections in other sections, any idea ? thanks so much for your tip

[@petarlhs]

Did you find solution ?

[@juraj001]

Thanks!

[@nicolasregentete5240]

Nice, smooth easy presentation. Well done ! and your method is really amazing

[@olehansen6568]

Hi. Nice tutorial. Q: I presume you can make some sections less than 100 vh (e.g. 60 vh) and as you say some larger (e.g. 150 vh)? If yes, how does the extra code look like when I need to "snap" the section correctly? Note: I don't know how to code ;)

[@anansicreative4068]

Well on the plus side, CSS is a great first coding language to learn. So for sections smaller than the viewport it does work exactly the same, however you then get the choice of aligning to the top, centre or bottom of the viewport (start, centre, end). For larger than viewport sections it gets tricky, Safari and Firefox are a bit uncooperative. The simplest solution is to change the snap type to y proximity, it will only snap when close to a snap point and therefor let you scroll normally inside that section. There is an article in the description which details almost everything possible with this property, also I’m putting a read only in the description and I’m going to be trying to get a good y mandatory solution working there.

[@steveshaw2150]

🔥🔥🔥

[@casperdeschuytter8883]

Hi Anansi! Thanks for the tutorial, the scrolling indeed works perfectly! However, Div anchor links to sections within the wrapper don't seem to work anymore. Do you have any solution to this? these links do work when building a page like this DIY in html and css. I tried dissecting my published webpage in chrome, looking for the element that seems to break the function, but I however couldn't find the culprit.

[@casperdeschuytter8883]

Would greatly appreciate you help

[@petarlhs]

Did you find solution ?

[@probablyinoperable]

Hey Anansi, thank you for the tutorial I have tried your code and also did a clone of your project on webflow, but seems like I cannot get it to work to my needs, I am wondering if you have some insights. when I tried your code without a div wrapper, but only on the body, it doesn't seem to work, I have the tried both .body and .html for the code embed. the page just jitters around and does not snap. I wanted to use body for the interactions, I have a scrolling interaction I wish to integrate with scroll snap, but inside a div block and when I set page scrolling interactions it seems like it does not count the page as scrolling but the div block is scrolling. I am wondering if there is any solutions to this problem

[@anansicreative4068]

Are the page scrolling interactions using the scroll within view function?

[@probablyinoperable]

@@anansicreative4068 Ah, no, i was using the page scroll function. also I am wondering if its possible to have navlink snap to each section inside the div block and automatically scroll to that section?

[@IszyIzzy]

Thank you very much.

[@anansicreative4068]

You’re welcome, thanks for watching!!

[@jeffmacpherson4283]

Really like the solution, is there a way to disable on mobile?

[@anansicreative4068]

You bet!! add it inside of this @media (min-width: 990px){scroll snapping here} change the size to start snapping on the device you want

[@jeffmacpherson4283]

@@anansicreative4068 awesome. great vid and easy to follow - definitely subscribing keep it up!

[@genesee7411]

@@anansicreative4068 Hey, sorry, total code newbie here. Can you show us what the code looks like with this added? I've tried a few different combinations and it seems to either not work on mobile or turns scroll snapping off on all sizes. Thank you in advance, I'm loving how smooth this is!!

[@anansicreative4068]

@@genesee7411 This is what it would look like, remember that CSS needs to be inside a tag. there is a clonable in the description and you can learn about @media rules here www.w3schools.com/cssref/css3_pr_mediaquery.asp @media (min-width: 990px){ .scroll-snap-wrapper { scroll-snap-type: y mandatory; } .section-1 { scroll-snap-align: start; } .section-2 { scroll-snap-align: start; } .section-3 { scroll-snap-align: start; } }