Streaming live at 10am (PST)

IX2 Horizontal Scrolling


#1

Is there a tutorial anywhere for the horizontal scrolling section on https://webflow.com/ix2

I’d love to create something similar but am having no luck. Was any custom css involved or was it done solely through IX2?


#2

The individual tutorials on IX2 animations are here:


#3

I’ve watched all of those tutorials but haven’t seen anything that touches on creating a section that continues to scroll horizontally until content is done.


#4

Hi @megan welcome to the community! :slight_smile:

Try making the DIV something like 200% width so it goes off canvas. Then make the scrolling interaction move that div on the X-axis.

Hope this helps :slight_smile:


#5

giving that a try now! thanks :slight_smile:


#6

Ah I see … you want to use the “Mouse Wheel” to scroll up or down… but move the page content right or left? If I have that right… That interaction would be mouse wheel animation… similar to this:

http://rawgit.com/tovic/dte-project/master/full-page-horizontal-scrolling.html

You would need to add custom code for that… JQuery plugin.


#7

Do webflow build it to with JQuery plugin or native throe webflow interaction2.0 on introduction web!?

  • if there is no way natively solve this! here are some past tutorials that solve it https://goo.gl/Hp15BS

#8

yup, that’s it! thanks


#9

no need for custom code when you use IX2. I’ll post a demo video soon.


#10

Looking so much forward to that demo @PixelGeek :slight_smile:

Does this also work for scaling?


#11

awesome, that would be great to see a demo.


#12

@pixelgeek you can do the horizontal scrolling on a stationary page like this without custom code? Man that would be awesome. I tried but couldn’t quite get it figured out.

http://rawgit.com/tovic/dte-project/master/full-page-horizontal-scrolling.html


#13

this might help:
Screen Recording 2017-10-30 at 01.39 PM.mov

clone it here:

enjoy :slight_smile:


#14

thank you! with the help of your video I was able to figure out what i needed to do! :grin:


#15

How to make other box 1 and 2 in …section/scroll me/box - box1 - box2 visibabe? because on this example other boxes when scrolled are not visible


#16

@Bence if you set the with of the boxes to… let say 30%, then they will be visible.


#17

I try that but nothing, nearest to this solution is to make scroll me display to flex but then just box moves left on scroll other boxes are fixed or i missing something?


#18

@Bence Oh yes, I forgot to say you have to set scroll me to display flex (so sorry about that). Each box got a second class name, so you have to make sure to change the with on all of them. It works for me
https://app.hyfy.io/v/abGyLkyibSU/


#19

@Sven_Erik_Slattedale thanks a lot i was experimenting on my existing project and some classes ware in conflict so i cant get correct results, and when i clone it then it was ok :slight_smile:


#20

Ah yes @PixelGeek now I see the structure… thanks @Sven_Erik_Slattedale for that tip… awesome! I’m working on a centered structure so this is the answer. Appreciate it.