Scroll & Snap Full Page Sections with Webflow and Scrollify - TUTORIAL
Вставка
- Опубліковано 3 гру 2024
- How I implemented a scrolljacking effect for Expedition Co.'s new website in Webflow using the Scrollify plugin.
-
Scrollify
projects.lukeh...
Scrollify CDN
cdnjs.com/libr...
Webflow 101 Crash Course
• (Old)Webflow 101 Crash...
-
Find me elsewhere:
Twitter: / thekevbot
Instagram: / thekevbot
Dribbble: dribbble.com/t...
This was AWESOME. Thank you. Been looking for a way to do this for a while. Also I'd 100% like to see you break down how you did that parallay, menu splash, and side nav thing. It's beautiful!
dude thank you SO much ive been struggling for the longest time trying to find a tutorial like this THANK YOU AGAIN
Kev. Your work is beautiful. Simple and is amazing form following function. Kudos. Following.
Really great!! Would love to see more tutorials from you, keep it going Kev!
Dude your sites are seriously too notch. Subbed. Keep these coming bro
Great tut, very useful thing to have 👍🏻 One quick thing, you do not need a lite account plan, that is just wasting money, the only reason you would need a lite plan is to export the code (as you clearly needed to), if you are hosting your site on Webflow you can use a free account plan. Webflow requires all sites to have site hosting to send them live, so if you are using Webflow to host the site, you would be paying for account lite plan + site hosting, adding site plan hosting allows you to add code and can be done on a free account plan.
This is incredibly useful Kevin! Well spoken and well explained, we'll be following your content more.
Thank you!
Really cool website man! Awesome tutorial! So easy to follow! Thanks so much!
Wow! Awesome! Simple and clear! Thank you for this. Please keep on adding more. You work is great.
Man. Ive been looking for this for the last 3 hours. You saved me. Thanks a lot
Handy and simply explained. Danke-schoen
Very cool, great tutorial, thank you Kevin. And x2 for the hero image parallax tutorial, that's a beautiful page you've created there!
Thank you Alastair!
OMG please, please, show us how you built that site!! So sick!!
very helpful Kevin, thanks for taking the time to make this
Thanks for watching Blake!
Hey awesome tutorial! I'm curious to know how you made that affect with the glowing letters though, would you be able to explain how you did that?
Awesome Video, keep on going.
I would like to see more
Kevin!!!! you just saved me!! Thanks for this tutorial. Keep it up!
I follow your steps...but it's not working for me :-((((
Hey Aron, can you provide a link to your site? I might be able to help you troubleshoot
Hi Kevin I did it! Thnx. This is the site I'm trying to clone their homepage www.getblk.com.
As you can see after the last section the site behaves as a normal scroll site. This is my project link. working-on-scrollifyslider.webflow.io/#4
What I wanna know is if you can help me with ...how to get that normal scroll
Sorry for the late reply! Your webflow link is no longer working, but this might be what you're trying to do based on the example you shared: projects.lukehaas.me/scrollify/examples/header-footer/ using the "interstitialSection" option.
Let's say your main sections have a class of ".main-section" and your last section has a class of ".footer", you'd use something like this:
================================
$(function() {
$.scrollify({
section: ".main-section",
interstitialSection: ".footer"
});
});
================================
Beautiful website! Good job.
Hey Kev,
This is awesome, great job!
Quick, easy and well explained.
Thank you so much for helping us out.
Hey, awesome design Kevin! Hella Rad! Thank you for posting the tutorial.
Very helpful video. Ive done scroll-hijacking through html-snapping, but its very buggy and not really useful most of the time. With this plugin i can do this way more smoothly.
this site is INCREDIBLE! can you please make more WF tuts?
Thank you so much! More's coming, i promise!
Great video, keep making them! many thanks!
Amazing portfolio.... damn man you inspire people w this!!
Thanks a lot Kevin, it worked perfectly for my needs. Hugs!
This was great! Thank you so much! Awesome tutorial
Kevin, great tutorial! Would you be able to do a quick one for the "hero image parallax"? Much appreciated! Thank you.
Thanks Jozef! I'll try to make one soon!
Thank you.
Thanks for this tutorial. Nicely done and no annoying background “music” - kudos for that. One suggestion, make the Webflow window take up more of the screen. You are a nice looking fellow, but watching you type is not as helpful as seeing the Webflow screen better, especially when viewing on a tablet.
You're absolutely right, thanks for the feedback!
Rad video man! Thanks for the help.
i love how you look like the emo Richard Hendrix from Silicon Valley, amazing video man!
legend man thanks so much
Works just fine, thanks ! Love the website as well ;)
keep it up! great tutorial
Great tutorial, thanks!
Glad it was helpful!
Very helpful! Thanks namesake!
Thanks dude, really helpful!
Thanks for this bro :) would love to see more tutorials from you
I'll get back into it, I swear! Thanks for watching!
Legend! This was so helpful, thanks! Is there any chance you can do a video on using the other configurations, options and methods etc?
Worked great, thanks for the tutorial!
great video thanks!
this is really helpful man
THANK YOU!!!
So helpfull, you're my hero!
Thanks lot. I'm happy for this because I find it about 1 years sh*t.
Amazing tutorial. Clear and direct. Loved it! I wish you would do more! Subscribing for the chance that you do!
Thanks Austin! I've been planning to for a while now, just gotta find the time... maybe with this quarantine.........
Hey, thanks for the video, it's really helpful, straight and to the point! I had a look at the live website and it doesn't seem to be snapping for me. Did you remove the snapping function, and if so what was the reason behind this, are there potential compatibility issues?
Good Stuff Kevin! Thanks
Thank You!
Thanks man!! You are great. Aswell as very pleasing to watch. Subscribing, thanks again!
Thank you Stefan!
Great Job... Thanks! this wa a big help
Glad it helped!
Thank you man!
Please do another tutorial on the webflow interactions as you indicated at 3:30
This tutorial is up on my channel, Gurinder! ua-cam.com/video/d6T8v5lKyXk/v-deo.html Hope you enjoy!
Hey, thanks for these videos. Not sure if yo uare keeping up with this anymore but I'd love to know how you connect that explore button with the panel animation. Thanks!
Hey Loren, thanks for the message! It's very simple - you just need to create a link and set it to link to a section, like this: university.webflow.com/article/anchor-links
Hope that helps, and thanks for watching!
Kevin Haag Sweet, can’t believe it’s that easy. Thanks!
Thank You
You're the man!
Kevin, this is suppa cool! Thanks.
Do you know, how o disable this scroll effect on mobile?
i would like to use it just for desktop view. THanks!
Add this parameter into your code touchScroll:true, and change it to false.
$(function() {
$.scrollify({
section : ".example-classname",
touchScroll:true,
});
});
Hey! Is this site available as a read-only link in Webflow? I'd love to dive in and understand how it's done in more detail?
Hi, I can't share a read-only link since this is the company who I work for's site, but let me know what you'd like a look at in more detail and I'll try to make a video about it :)
Good video, however, the site breaks on vertical rescale and jumps to other sections. How can you keep the section in view, still in view when you rescale the browser as I feel if this can't be done it gives a bad experience.
Awsome thanks
Thank you! But what if in my project some sections take up the whole screen, and the others take up half of the screen, and they are arranged in a random order (for example, 3 small sections, then 2 large sections, and so on). Thanks in advance for the answer ;)
Kevin Haag i want to see more tutorials from u great job
Hoping to start back up soon - thanks for watching! :)
Thanks for sharing this Kevin. Wanted to know if you can share how you created the text highlight effect for the project description on your site. Thx in advance
Hey Shachaf thanks for watching! If you're referring to the orange brush stroke behind the text, it's actually really simple! Just set your text to be inline-block, and add an SVG brushstroke as a background image. Then you can play around with the background size/position until you're happy with it.
Thanks for the video.
How do you apply the screen snap on a single section in Webflow?
Thanks for watching! How do you mean exactly?
Hey Kevin, dont know if you're still reading that comment section but in case you do i got a problem:
first i got my Homesection folowed up by like 4 panels scrollify functions perfectly on those panels but i want scrollify to start with my homesection which doesnt work.
How do i have to modify the code to do that?
Hey Demian, can you send me your readonly preview link so I can take a look at what you're working with? Feel free to email me if you'd rather share privately! hello [at] kevinhaag [dot] com
This is great!
Thank you!
Is there anyway to have sections that have normal scrolling? I want to be able to have some sections that don't jump.
Yes - you can use the "standardScrollElements" option for this. Just assign it the class name that you want normal scroll behavior on. Check the documentation for more info: projects.lukehaas.me/scrollify/#options
@@khaag Tried that, when the page loads up, it jumps to the first "panel" then the full section scrolling stops working all together. I got it to work by making the "panels" bigger than 100vh. That will give a normal scroll in that "panel". My understanding of standardScrollElements is thats for elements that have a scroll feature.
Matt Laracuente Matt Laracuente Hi ! interested in your decision. All i know if you will do section size auto and content inside this section will bigger it will scrolls normal if overscroll: true. But i cant do that on mobile. On iphone big sections still scrolling to 100vh step :( Maybe you know how to get normall scroll of big sections on mobiles???
Hi Kevin thanks for the video!
I have been having issues with the mobile site being too clunky/buggy. Does anyone have any further information on this issue?
Hey guys, is there a way to leave this scrolling on all breakpoints but mobile?
Hey Kevin, great instructions. I found that the code does not work on mobile, the page just seems to stick to the top, any thoughts?
Hi! Keven. In your demo, you scroll down to other section, the number of pages changed. How do you do it? I hope to see your demo more. Thanks.
Hi Oliver - I'll try to do a tutorial on this sometime soon!
@@khaag Hi Kevin. I support for you :)
Hey Kevin - being an older video/review, would you still recommend this as the best option for snap scrolling? So many others are suggesting fullpage(dot)js. From what I've gathered, you can no longer use Webflows interactions if you choose to use Fullpage(dot)js, but it's more stable. Whereas using Scrollify (it would seem) allows you to continue using Webflow's interactions, but "it" may have issues/challenges with different screen sizes or other instability. Would you still recommend this method? Is there any truth to what I'm asking? Thanks!
Hey Remon, I've never tried fullpage.js so I'm not sure about that... but as far as Scrollify, I haven't noticed any issues, but it's possible it might interfere with more complicated builds.
@@khaag yeah that's my fear
I am in the process of creating a horizontal scrolling website
It has 2 vertical sections, 2 horizontal sections, a loading screen, a sticky sidebar that has a text rotating in a loop, etc.
Well, only way to know is to try and see
I'll give feedback in a few minutes
Legend
Hey Kevin, greets from Berlin. You made me do it. :) Where/How cn I add the extra configurations? Thanks, You re awsome.
Guten tag Ben! You can add configuration between the curly braces, like this:
$.scrollify({
optionA: 'value',
optionB: 'value',
optionC: 'value'
});
Just make sure to separate the options with a comma, and leave it off the last one. Prost!
how do I get rid of the # that appears on the domain? Thanksss!!!!
Hello! Is the scrollify works with webflow interactions like scroll in to view ?
Great tutorial!! Thank you!! Can you show how to customize the speed and ease? Its super fast and snappy. Trying to get something alil more buttery. Any help would be rad! Thanks dude!
Try playing around the the "easing" option. easings.net/en has a list of easing functions you can try - "easeOutSine" would be a good one to try.
You can change "scrollSpeed" as well. Here are a list of configurable options for Scrollify: projects.lukehaas.me/scrollify/#options
✌️
Here you go :) subscriber 700
Thank you very much ! :)
Is it possible to configure the height of the panel ? I would like to create this effect for a panel of 50vh... not the full page. ;)
Hey Ambre, yes you can do that! I made this little demo showing you how. Feel free to clone it to see how it works: webflow.com/website/Partial-Height-Sections-Scrollifyjs?s=scrollify-50
scrollify-50.webflow.io/
Hey Kevin! Great tutorial. Simple and straightforward.
I'm hoping you might have a moment to help me. I'm finding that changing the easing attribute to anything other than "easeOutExpo" stops the plugin from working altogether. Do you have any insight into this problem that you could offer? Do I need to load an additional jquery library?
Within the script tag, just below the
$.scrollify({
section : ".mycontain",
code, I've added a line for
easing: 'easeInOutExpo',
It works when the line reads 'easeOutExpo', but not when using seemingly any other jquery easing function.
Nvm. Sorted it out by adding GSGD's easing library to my page.
Does this still work? I'm not managing to have it on my site :(
Hi, Kevin! Thank you for that great tutorial! I wonder how can i make pagination not a round but a line? And the active section must be longer than non active. Can you help please?)
Hey there, I'd love to try to help, but I'm not quite sure I'm following what you're describing... can you try explaining it a bit differently?
@@khaag pagination on slideshows in Webflow are usually indicated by dots or small circles, he's asking how he can change it to be more like yours where you have like 5 lines that indicate the page or sections and are also clickable
but it's been 3 years so lol
You rock!!!!
Subscribed and much appreciated good sir. looking forward to more tutorials! on theexpidition.co when scrolling down from first section, it sort of fades out to black, so this is tied to scroll interaction, can you explain what is happening?
Hey Phillip, thanks for watching! That's actually really simple - the background color on the body is black, and then I have an interaction for "while the page is scrolling" set up so that when you scroll down about 10-15%, the hero image container opacity is brought down to 0%. Hope that helps!
@@khaag Makes perfect sense, thanks!
Great tutorial. But I have a question about how to update the hash name. Do you mind give me a hand?
Do you want to change what the hash is when navigating to a section?
@@khaagYes that what I'm looking for
Hey Kevin can you please help me? For the love of god i cant figure out how to slow doing the animation. My client wants scroll animation to be slower, how can i configure this? i have no idea where to start! Please help!
$.scrollify({
section : "section",
sectionName : "section-name",
interstitialSection : "",
easing: "easeOutExpo",
scrollSpeed: 1100,
offset : 0,
scrollbars: true,
standardScrollElements: "",
setHeights: true,
overflowScroll: true,
updateHash: true,
touchScroll:true,
before:function() {},
after:function() {},
afterResize:function() {},
afterRender:function() {}
});
You can adjust the scrollSpeed bro
you should not have clients.
Hi Kevin,
This tutorial is awesome, it's exactly what I needed. I do have one issue and not sure how to fix it. I was wondering if you might be able to help with this, when I view it on my mobile nav bar (fixed) at the top, it get's cut off or gets the bottom content pushed down because of safaris search bar. any ideas of what I should try? Thanks in advance for your help and tutorials!
Could you share your project's read-only link so I can see what you mean? And thanks for watching!
preview.webflow.com/preview/howenstinedesign?preview=5789a449b65763f5202d76bc7c2b350a@@khaag
I followed all the steps just like mentioned in the tutorial but it is not working. Please help!
Can you share the read-only link to your webflow project? Here's how: university.webflow.com/article/sharing-your-sites-read-only-link
@@khaag Hi Kevin, here's the link. I was busy completing my portfolio website so couldn't check you message earlier. here's the link: preview.webflow.com/preview/jamils-first-project-fb95-276551ab69f89?preview=d7f582b7c30bb7ff80cd4fcfd5b411ab
thanks for your help.
@Jamil Nasir - should be really simple fix! In your script that's initializing Scrollify, you're calling it on ".MainContainerProject", but since javascript is case sensitive and Webflow converts class names to be all lowercase, you need to call it on ".maincontainerproject" instead. Let me know if that works! (And sorry for such a late response!)
Could you tell me the font name of your heading sub, looks awesome
On the expedition.co site we use P22 Mackinac and Neutrif Studio.
On my thumbnails I use Antique Olive Nord
hey dude thanks for the tut, really helpful! Im using this for my third section from the top and it works however when the page load it brings the section to the top immediately leaving the other sections unseen, any ideas why this may happen? cheers
My immediate thought is that maybe you have an anchor link in your URL? If you send a link to your project, I can check it out ✌️
@@khaag Here it is man thanks heaps! preview.webflow.com/preview/orbis-annual-report2019?preview=99d8a64dc14180622ef6750f594e9698&mode=preview
Hi! How to off this on mobile? :)
Does this work on mobile?
Yup!
Thanks for sharing, and awesome parallax in the hero.
I added scrollify to my wip website: flowency.webflow.io but when I scroll it studders for a fraction of a second(windows/chrome)
Any idea what might be causing this?
Hey Kevin! Thanks a lot for your tutorial. I'm not sure it's really working in my case, sometimes works sometimes doesn't. Might be a code issue? Also, I can't scroll up/down inside of the divs of the panel 2 because suddenly all the section is scrolled up...
Here is the published website and a read-only link:
leixida-org.webflow.io/project/ipsam#2
preview.webflow.com/preview/leixida-org?preview=324fcd89b4082f02c0df37f1ad764315&pageId=5ef9e7e0e25cab7247807600&itemId=5ef9e7ed1df59a627377aeaf&mode=preview
Hey Joshua, cool site! I'm not entirely sure that this will work as expected since you're using CSS grid. If possible, I'd recommend trying to move your 2 panels outside the grid container and see if that works
This isnt working for me :( Am I the only one?
Didn't work for me either. Did you manage to fix it?
I can't say for sure without checking your project links - but make sure the element you're calling the script on matches the class name that you gave it, but in lowercase and without any spaces. Webflow converts classnames to lowercase and replaces spaces with hyphens, and since Javascript is case-sensitive, any custom code needs to be called on the converted classname. Hope that helps!
@@khaag Class name is correct but it still does not work
@@juliekayeart @Joe @sheila papp. Same thing happened to me! Go back to Kevin's video at 10:31..that solved my problem! I pressed on copy without waiting for the dropdown and pasted whatever got copied..so it didn't work!You need to WAIT for the drop down and THEN select copy script tag and paste!! It will work if that is what any of u ll missed! Hope that helps! And @Kevin Haag thanks for the great video!! keep safe everyone!!
Too much introduction and context. Actual tutorial starts at 5:17
very misleading content. U saying at the beginning no custom coding was necessary , yet you applying jquery plugins.
Thanks man! That was super helpful!
Thank you!!!