Streaming live at 10am (PST)

Imitate slides change of Absolute objects placed one on another

Hi guys,

I am trying to achieve this effect that imitates a slider move on a mouse scroll.

I looked through Webflow forum, but seems like this thing doesn’t work properly
Trigger slides with mouse scroll? since the slide is stuck after the first move. it works randomly, sometimes it moves, sometime no.

then the other thread with a solution from Diarmuid_Sexton with his cloneable website http://horizontal-scroll-full.webflow.io and a custom code, but seems like it is working on his website, but after cloning and publishing the website. it doesn’t work…

do you have any idea how I could achieve this effect?

thank you!


Here is my public share link: LINK
(how to access public share link)

On that first link on the page it points to this clone
Change Slide On Scroll Utility - Webflow
I opened in webflow and seems to do what you want it to do.

hi, thanks for the answer.
you probably scrolled it once? in this case, yes it works. but after the slide is moved, then nothing happens, when you try to scroll again

I went back and forth and back and forth and back and forth, I used edge.
Yes only the live website works, you have to publish the webflow one as its using scripts which dont work in preview.

I haven’t yet cloned it. it is not working even on that project’s link. I tried both Safari and Edge… Really weird that it works for you…

Just in case you missed it, it only works if your mouse is over the image.
https://www.dropbox.com/s/zefni7iconto71p/slider-scroll.mp4?dl=0

no, of course I did it over the image. still does’t work. it causes some other strange behavior. if I hover out of the image and then hover back to the image, it pushes the slide itself without even scrolling it. I don’t think this options works for me :frowning: would appreciate other options.

If that published website doesn’t work on your system then I would work out why else any solution isn’t going to work.
Did you have the link to the other cloneable site as I couldn’t find it.

the thing is that I didn’t clone and didn’t publish. it just doesn’t work for me even on this original https://scroll-trigger-slider.webflow.io

That’s my point, you need to know why your system is stopping that.
Do you have browser extensions or script blockers enabled?
Try a new vanilla browser.
Plus I was referring to the cloneable site if there is one to this link http://horizontal-scroll-full.webflow.io
Horizontal scrolling isn’t something I have experience with as its not something I like visually. I might take a quick peek around to see if I can find something.

Oh. You actually send me the link to this project in your very first answer scroll-trigger-slider - Webflow. Probably that’s why I was confused.

So yes, this project http://horizontal-scroll-full.webflow.io I have cloned and published. And the thing is that it slides on his website but doesn’t work on mine after publishing. here is the link to mine Webflow - Horizontal Scroll-Full

thank you for checking it!

Adam, sorry dude but I need a link to the guys cloneable website not the published one.
I see your website and yes it scrolls up not horizontal so lets see if I get the source you copied its the same for me.
You got me curious now.

Alright. Here is the original:

Horizontal Scroll-Full
Here’s the horizontalScroll.js sample site - you can see that when you scroll, it scrolls one full page/section

Website http://horizontal-scroll-full.webflow.io/
Webflow Showcase (cloneable) https://webflow.com/website/horizontal-scroll-full

There is another one, which I am not sure which function it performs since it doesn’t work even on his website. You should probably disregard this one and focus just on the first one we were talking about:

Horizontal Scroll-Partial
Here’s the jInvertScroll sample site - you can see that when you scroll on this site, it scrolls by how much you’ve turned the scroll-wheel/trackpad

Website http://horizontal-scroll-partial.webflow.io/
Webflow Showcase (cloneable) https://webflow.com/website/horizontal-scroll-partial

Cheers, I noticed it stopped working 2 years ago from the comments.
Right, it uses a javascript plugin which you need to find and insert.
I think its this
User-friendly Scrollbar For Scrollable Content - horizontal.scroll.js | Free jQuery Plugins (jqueryscript.net)
If you read his notes he says this
This is sample site which uses the horizontalScroll.js plugin to give a horizontal scrolling effect. You can see that when you scroll on this site, it scrolls one full page/section.

I am looking at something that references this website and see what they have to say.

thanks. I really have no idea where to paste all that code.
and probably that means that I would need to rename all the classes?

Ok that isn’t the code he used that one adds a scroll bar.
So I have found a pixelgeek video that talks about that site and tried to so the same without any code.
He does it from a blank page so see if you like his idea and build it at the same time.
https://www.youtube.com/watch?v=05frGyjyZvE

I am currently using this solution but it doesn’t snap the picture as was on the example we discussed earlier. In other words you can stop a slide on the stack between two pictures in the middle of the screen. While that original solution snapped each picture to the side of the scree with one scroll so you would never see this stack between them. I am really not sure why Webflow makes it is so problematic to achieve this… So many users outside of Webflow have this horizontal slide scroll… It’s a common site model.

That could be so easily done in a slider settings. You enable one option and the slide can be scrolled with a mouse. You enable another option - and the slider snaps to the screen instead of stacking…

Can you make the pixel one shareable so I can have a mess with it

it is here.

thank you for looking into it!

ok looking at it now. you can delete the link if you want to keep your work secret.