Hello everyone! THIS IS URGENT
I need help with a problem I have with a horizontal scroll timeline. I’m new to Webflow and web design in general, and this is the first page I’m building. I followed a tutorial to create my timeline, where the horizontal scroll is activated by a vertical scroll. This is the tutorial: https://www.youtube.com/watch?v=B6aVtifYScg&t=252s
The issue is that my client isn’t happy with the result. They prefer that the user can scroll horizontally with a swipe from left to right instead of with the vertical scroll of the mouse or tab. BUT without losing the animations of the timeline.
My question is: Is there any way to modify what I’ve already built to achieve this effect, or do I have to completely rebuild it using a slider with code? If the second option is the correct one, could you guide me on how to do that?
Any help or suggestions would be greatly appreciated.
Here is my public share link: LINK PREVIEW
My website: LINK WEBSITE
Thanks in advance!
That’s a bummer! Was looking/working well. Do they only want this swipe function on mobile views or all? Taht will make a difference if you’re wanting to retain the interaction on desktop but not on phone.
You’ll essentially have to remove all of the width and height settings so that each of your timeline divs is side-by-side. Your ‘camera’ div will retain its no-overflow setting. Then your “Frame-timeline” div will need an overflow ‘auto’ setting allowing the divs to scroll sideways.
You may need some indicator letting the user know they can swipe left to see more.
1 Like
Thank you for your response, it worked!
Regarding your question, the swipe function needs to work on both desktop and mobile.
The only thing I’ve realized is that for mouse users, they can’t scroll horizontally. Do you have any recommendations for how to also add a drag function to scroll through the timeline sections?
That’s why I was thinking you might be keeping the original interaction for desktop and then have a second version that’s manual for swiping. If you’d like to do this, you’ll want to restore a backup with the original interaction, make sure it’s only enabled on Desktop. Then, on the skinnier viewports, apply all of the changes needed to make it manual.
This is also why I was thinking you’ll need some indicator to let the viewer know it scrolls/swipes. Tackpads on a laptop can swipe and all mouses have that ability. Some require holding the shift key while using the scroll wheel tho.
edit: looks like there are some options for click and drag
