Streaming live at 10am (PST)

Horizontal scrolling / slider with interactions 2.0


#1

How do I scroll trigger the slider to show slide through slide in interactions 2.0?

I am really eager to finally be able to pull this horizontal scroll off as it wasn’t possible in the previous interactions.

I hope the slider will act as the structure to implement the one swipe concept. I’ve been trying to figure this out forever as seen in this example -

I would really appreciate any help in executing this, thank you!


#2

I don’t think you can pull that off with the Slider Element itself, but you can make an horizontal scroll with IX2.

There’s a section acting like this here https://webflow.com/ix2

Made by Webflow’s Ryan using only IX2.

Principle (I guess)

  • start by creating a section, define a fixed height : the time that it takes to scroll it will be equal to the time it will take to scroll the horizontal content from 0 to 100%. So adjust the height accordingly. Give overflow:hidden to the section, and position:relative. For the bg use either a solid color, or a gradient/image but fixed, so there is no clue that you’re scrolling down.
  • add a div inside the section, make it position:absolute aligned to top left. Define a fixed widthand place your horizontal content in it.
  • with IX2 define a horizontal motion on the sub div based on a scroll trigger.

With this system you can even place invisible elements down the section, give them unique IDS, and scroll to a specific horizontal point by linking to them.


#3

Been trying to replicate this interaction for ages! Having difficultly getting the desired effect like they’ve been able to do so elegantly with the IX2 page. How do you get the horizontal scrolling to effectively “Stick” and then unstick when the user is done with the section. Seen other form answers saying that you need code to get that effect, but as I understand it you can now do it with IX2. Any help is much appreciated!


#4

Yah I have been trying to recreate this horizontal scroll interaction as well and I just cannot figure it out.

It looks like they are using “position:sticky” in the CSS at one point which isn’t a style that is available in Webflow.

I’m not sure if thats whats causing the problem but if it is, then that is quite deceiving to use a css style that isn’t actually available in webflow.

Would love to see a tutorial on how this was achieved.


#5

Could you show a demo of this?
Really struggling to get this to work.


#6

@vincent @PixelGeek, would love an answer as to whether this is possible to accomplish natively with IX2.

If it isn’t…well, it’s a bit disingenuous to put it on the IX2 landing page itself, no?


#7

I’m encountering the same issue as the others who’ve replied. The horizontal scrolling content must lock to a fixed y position or be counter scrolled to give the appearance of a fixed position. Maybe this can be done with a downward counter-movement of its position? Seems tricky.

According to the ix2 sample’s css of “gallery_container” its position = “sticky”.
So maybe the sample page is not completely built in Webflow?


#8

I tweeted at them and they confirmed that custom code is required, unfortunately. The whole thing seems a bit sketchy considering the page itself is promoting a dev-without-code product.

Love Webflow, but this is pretty disingenuous IMO.


#9

Would be great to have a sticky feature built in natively. The work-around is to have an absolute positioned div set to hidden and then show based on the scrolling position of a separate div (the background). It’s possible to have this hidden, absolute positioned div move up into position to mimic the ix2 sample, and then have the contents inside of this absolute positioned div scroll horizontally. Then, when the background div moves out of the viewport, the absolute positioned div moves up and returns to “hidden”.

Clunky work-around but possible.


#10

This looks awesome! I’ve been trying to figure out how to get a looping image to work like you have with the almonds and chocolate. Can you tell me the steps you took? Or share your project so I can view it in webflow and see what you did? Thanks!

Nice job on this. I love it.

Jen