Advanced interactions: Horizontal scroll in Webflow
ฝัง
- เผยแพร่เมื่อ 2 ส.ค. 2024
- As previously seen on Apple's iPad page, horizontal scrolling fully engages visitors by using a unique interaction that changes their scrolling experience from vertical to right to left. Scrolling can also be achieved using the up and down arrow keys (spacebar for just scrolling down).
But, here’s the secret - it’s not horizontal scrolling. It’s vertical scrolling with an interaction that moves elements in our viewport as we scroll through our project. There are five parts to a horizontal scroll effect: the track (this holds everything and serves as the trigger for the horizontal movement interaction), the camera (which is positioned sticky to the viewport as the content scroll through), the frame (which holds all of our content and aligns them horizontally), the content, and the interaction.
In this lesson, we'll teach you how to make a horizontal scrolling interaction with these steps:
00:00 - Introduction
00:52 - Create the “Track” Section
01:33 - Set up the “Camera” Div block
02:40 - Structure the “Frame” Div block
03:25 - Add items
05:05 - Configure the interaction
07:50 - Configure the interaction on tablet and mobile devices for accessibility
09:24 - Recap
Read about it → university.webflow.com/lesson/...
Clone the project → webflow.com/website/Cloneable...
----------
Get started with Webflow: wfl.io/2r7cVUW
Join the Webflow Community: webflow.com/community
webflow.com
/ webflow
/ webflow
I just love this guy. The hair, the energy, the smile.... everything.
Marry him. You never know
@@77asare huh
@@77asare just bcoz u love someone it's not necessary that one has to marry
So you are BLACKED ?
nohomo me too, got some invisible light going on
So much clarity in the writing. So much unique personality in every presenter. So much power in the product. Webflow is so much better than anyone else out there. Period.
The host is crazy good - love listening to him
Hey guys, just wanted to take some time and thank you for all the videos you have been putting out! I really enjoy the simple and clear visualisation and presentation. I also love all your energy and the little funny parts you integrate from time to time. Please keep it up, although you are not getting that many views yet!
I been following this host even back in the early stages of Webflow. Great tutor!!!
I just asked on the forum about it and now I see the full video about it. Love you, guys.
This tutorial was spot on and easy to follow! The instructor is amazing. Would have loved to see more of him. Cheers everyone!
Amazing tutorial. So clear and understandable. Well done guys
LOVE the 5 steps before you jumped right in 👍excellent presentation.
Can't ask for a better how-to video than this. Got some sincere laughs out of it too.
Motivation is what I need and watching Webflow tutorials or anything related to it is my motivation
Seriously well done! Breaking it right down to mobile breakpoint reality
I watched a few clips from this guy a while back, noticed he hadn't been active on his page for a few years and wondered what happened to him. Then boom here's back. Glad to see he's doing well ☺
Great video and teaching. This is right on time for a personal project I've been working on
I was just looking for a good tutorial on this yesterday, thank you so much!
Great explaination on how to achieve horizontal scrolling! Good shot Webflow 👍
By far, the best tutorial I've found on this functionality. Thanks, Webflow - keep the great content coming! And great to see some new faces in front of the camera, I found the instructor engaging and easy to follow!
Glad it helped!
@@Webflow Is there any way to page up? I've added quite a few images and the only way to get back up the page is scroll up LOTS.
@@spaceshipdev I'm guessing to add a fixed link block with probably some text that is fixed to the bottom left or right of the page. set that link block to scroll to top of page. hope that helps
I like it so much the tutorial and
especially the picture with the cute child on 0:04! Webflow and your webflowteam is so awesome!
Best tutorial experience I've had, this guy rocks
Man these tutorials are a lifesaver
This tutorial was so complete and well explained...many thanks
Glad it was helpful! :)
The next Webflow star ⭐️ has been found.
This tutorial is incredible
Super useful! Thank you guys!
Very much like that you also include the solution for tablet and mobile.
Excellent teacher. Thanks!
Awesome stuff. Thanks.
I thought a JS library like GSAP would be needed for this effect. You explained how to achieve the effect very well. Thanks a bunch.
Please more fantastic tutorials.
Thanks! Helped me a lot!
That was useful. Thank you.
Genius, thank you!
This a bit more complicated than the usual, good video and great hosts
Where is my guy from all previous videos ????? Never replace this absolute GEM again
The only downside of this is if frame item is not just images, it will be very difficult to editing things. Recommend calculate everythings wisely in design app.
There is a solution for this (might not be work in some case): make the all the item horizontal like normal, turn them into symbol and drop them into the frame wrap. You can make the track invisible by now, just remember to turn them on in the interaction and invisible all the design symbol.
The editing still works fine on my side!
You just have to scroll to the end with SHIFT pressed. This way, the Editor will also scroll horizontally.
I'm transforming my whole portfolio to be horizontal and it works perfectly.
@@Stifl I tried this but it didn't work, I'm using a Mac do you know a work-around this?
@@glaciijpg8394 I'm also on a Mac and have been using a pretty simple work around. Instead of turning things on/off I've been rearranging the order of the frames to bring the one I want to work on to the front. For example: the order is normally camera, frame, slide 1, slide 2, slide 3, slide 4. If I need to work on slide 3 I drag it to the top: camera, frame, slide 3, slide 1, slide 2, slide 4 and then move it back when I'm done editing. Hope this helps.
It’d be great to use the CMS with this. 🔥 Thanks for the tutorial!
It does work. You just have to use the collection list wrapper for the interaction.
@@r0tt1ng Do you happen to have a share-link to this? I am having some trouble
@@r0tt1ng im having troubles too
You are the fu**ing master, this tutorial is incredible, one of the best explained. If you have a course I'll buy it. It would be great if it had Spanish subtitles for Hispanics who still do not have tutorials for this tool in our language.
When he said "Lets drop it", I felt that
This was the best video yet…🗿📈
Thank you.
Goddamn that was a cool video to watch, already got ideas on where to use it
Great content
Thank you so much!
Are there possibility of going a step further and staying / scrolling for a while on each image to then do animations on each image?
Perfect!
Thanks, Amazing *-*
Thanks!
Incredible Tut, Can we have both guys?
Thanks🙏🙏
Brilliant 👌
So good
very usefull!
Honestly we need y'all in school classes
GENUIS!
good stuff
3:53 Thanks Grimmer, I really meant that. Thnaks Thanks Thanks Thanks x ∞
Good Video, but i got a concern about this technique that i can't seem to solve by myself. How to keep this responsive ? is there a way of implementing a height-increase of the track depending on how big the child elements are in width ? I would need this because i want to create a collection of items that a customer could drag into this track, but if he always needs to adjust the track height manually, the purpose of CMS in this case becomes a little bit obsolete. Thanks in advance and keep up the good work guys
Is there a tutorial where you explain how you created the nav bar and footer? When I follow a long, i noticed my images started disappearing under the nav bar unless i do extra scrolling.
This guy is awesome. I wonder what his personal website looks like
I used this tutorial to design a site that scrolls horizontally instead of vertically, but the only problem is that my animations that I put on each "slide" aren't working/ go off before you can get to them. My thought is because the slides technically scroll into frame before the user actually sees it due to it being horizontal. If anyone knows how I could animate things in each section of the horizontal scroll please let me know!
I currently need help with this too!
Very good video, easy to follow along, yet I'm getting it wrong! I'm having an issue when I drop the image into the item div block, it doesn't show up at all. Has that happened to anyone else, and if so, how did you fix it?
Same!!
Alright, great! But... Could we scroll the other way around: from left to right? Or from bottom to top?
Great tutorial! I am confused why you offset the ending animation of the scroll by 15%. Can anybody explain that to me?
Thanks, Brandon! Hopefully, it's helpful for the horizontal scroll interactions you create.
We'd be happy to explain in more detail: with no offset, an interaction set on scroll for a given element, our Track section for example, would end before the last image was fully visible. The interaction worked for our project (moving our elements 300vw to the left), but we wanted to offset when the interaction ended because the interaction ends when the section is leaving the viewport.
Using a 15% offset (or any number that works for your project) and the interaction will wait for the element (using that offset) before ending the interaction. It’s handy when you have an element leaving too soon so that the animation ends when the element is visible rather than when it’s barely entered the page.
Would anyone know how to adjust the height of the track so that it fits a changing amount of items in the frame? I want to have the items be CMS items but 5 items would overlap and 3 would leave an empty space
How would one use this technique within the Webflow CMS? Any pointers?
I'm working on that atm. I'll keep you updated
Hey, I recommended this on the website 2 days ago!!
New character unlocked
Is there going to be other payments providers like After Pay, Sezzle, Quad pay,etc?
They’re killing me with the pace of these e-commerce updates
Wonder if i can use this with collections; and also if on mobile this scrolls seamlessly
In the background is this done by solely css or with js? Also is it possible to make the slides "snap" when being close to be perfectly in view?
Thanks!! Is there any way to create a infinite horizontal layout in order to loop the items divs without extra code? That would be awesome
Are you referring to a horizontal auto-scrolling marquee?
How can I do this but having the track remain horizontal scroll for the desktop/tablet/mobile while being able to still scroll down. I'd like for the frames (pictures) to scroll horizontally and be stationary, but I'm also noticing that the spacing from top to bottom is waaay too large. How do we shrink that?
What about a simple fullscreen horizontal scrolling section without the sticky section shenanigans?
did you find a tutorial for this cus that's also what i'm looking for!
I can't see the rest of my content in the designer, despite holding SHIFT while scrolling, any workaround?
You might want to use your touchpad or hold down the center button of your mouse to move the items sideways instead of scrolling down.
@@user-kg4xp2wp3t I tried holding and scrolling but its still not letting me see the rest, I'm. using a MacBook btw
Hi everyone, everything works just fine until I have to do an interraction with my "track" div. I think I tried everything but i don't seem to have the thunder shape on the track div even when I create the new "horizontal scroll animation", which defines the rest of the interraction... I don't know if you understand, but any help would be greatly appreciated ! :D Thanks for the video !
This method causes horizontal scroll (the bad kind) to happen. The overflow trick from your other videos doesn't work in combination with what you explained in this video. Any idea how to overcome this?
i have the same problem i have a visible scrolling bar at the bottm and i cant get rid of it for the life of me if you found a solution i would be grateful
Great tutorial, thanks. However, I'm getting horizontal scrollbar at the bottom of my browser and there's one even in your project. Is there a way to fix this? Thanks!
The community might be able to help with this. Can you post your question and your project's read-only link on the forums at discourse.webflow.com
Were you able to fix it @bolo9253
How do i put CMS for my projects in the horizontal scroll?
Is this what would consist of intrinsic (true 2D) responsive web design?
Quick question, what if I dont want to have the camera to take the entirer viewport height but instead something like 50% of that how would that work then.
Ideas on how to had a horizontal progress bar?
This article may help you with that 😁 university.webflow.com/lesson/scroll-progress-indicator
Is there a way to put anchors at at specific location if we want a menu button to go at a specific item? I'm struggling here.
Hi Francois! Great question! It is possible to add anchor links which scroll to a certain section. Though it's very much unique to each project.
Can you please send over a question on the Webflow Forum: forum.webflow.com/
Please be sure to include your Read-Only link: university.webflow.com/lesson/share-your-project-and-invite-collaborators
Thanks in advance!
how can i place a div pop up on top of the page with the track also in the body, even if i move it on the top layer it does not work
Hello. I have a question? I have 4 pictures but it scrolls to the third picture after that goes down? What am I doing wrong ? thanks
Is there a way to make this work with sizes relative to the content? Here we are using 100vw by 100vh elements, but what if I'm using square pictures for example?
Hi Dario! Great question! Yes this is possible to build out with elements which aren't 100VW in size. If you're having any trouble with building this out, please let our community know in the Forum: forum.webflow.com/
Hi, did you find a solution for this? I’m struggling to do the same thing
Help! I can't access/view the items inside my scroll track inside Designer View. Thus, I can't edit them after the track is complete.
- I'm on Windows 10, Chrome, SHIFT+Scroll doesn't work inside designer.
- Changing Overflow behaviour to VISIBLE doesn't work either.
But it works while you are scrolling down while previewing/exporting the page. Thing is I can't edit the items inside the Designer because for some reason they are hidden (even with overflow visibility enabled) or the SHIFT+SCROLL mouse action doesn't work inside the designer and I cannot access them.
Hi there! That sounds like there may be a bug or a local issue.
Please reach out to us here for support: university.webflow.com/support
😍
This doesn't work when the 'track' element is nested inside another div. Anyone know how to fix this?
hello ! At 05.55, why i don't have ( does not appear) the scroll actions option on my interactions panel for my "frame" at the right ? )-:
I'm just starting out, I've tried everything many times but nothing)-:
thanks !
same problem
How to include video player in web flow
Plz do video on that
I'm stuck at the part where you went and created 3 more Items/Images. I did the same thing and It's not scrolling to the right, and just the first image is constantly showing when I scroll.
same
For me, with a trackpad, I can still scroll a few cm to the right, which makes it look unprofessional, the whole website becomes off-centered. How do I fix it?
I need help finding out about the ending point. In my case the the website switches back to vertical scroll as soon as all images are already outside of the viewport which leads so a fully white page for some time
Can you post this question and your project's read-only link on our forum?
discourse.webflow.com
university.webflow.com/lesson/share-your-site
I have a question..is there anything like webflow for apps ????? Like we don't need developers for export our designs to app....
Figma
Where's the old host?
Ive got Problems with animations and snapping to viewports. do you have any advice on this topic? does this work with scrollsnapping?
You can try following this community members tutorial for scroll snapping here:
th-cam.com/video/o_lWNEevHJo/w-d-xo.html
webflow.com/made-in-webflow/website/css-scroll-snap
Hope this helps :)
the scroll works great, however when it scrolls the second item shows blank
any solutions here?
Try removing the image for the second item and uploading again. If that doesn't work, come join us on the forum and post your question there with your project link. forum.webflow.com
_"Thanks Grimur, but I'm done now."_
- _Micah_
Need some help, Sticky isn't working on Camera layer. Thanks in advance!
Hi Joshua, would love to help. Get in touch with us using the question mark in the lower left corner of the Webflow designer. That will get you over to our guides, courses, forums, or allow you to contact our support team. Best wishes!
Hey Joshua, OR For anyone who needs this, I got the sticky element to work by making the track height the full height of the items combined. So if we use the video as an example, if the track leaves screen immediately and sticky doesn't work, set the track to 400vh. That way the camera stays sticky in screen and doesn't leave until your interaction is done. Hope this helps!
Hey Joshua, OR For anyone who needs this, I got the sticky element to work by making the track height the full height of the items combined. So if we use the video as an example, if the track leaves screen immediately and sticky doesn't work, set the track to 400vh. That way the camera stays sticky in screen and doesn't leave until your interaction is done. Hope this helps!
Can I make it in such a way that the camera doesn't take up the full vwh?
Yes. you can experiment and set the camera to any height or width that fits your design.
Followed the tutorial through and through but after publishing I have a horizontal scroll bar appear on the bottom, what am I doing wrong?
Can you please reply back with a share link to your project? I'd be happy to take a look.
university.webflow.com/lesson/share-your-site