This website is using what seemed to be not possible (fullpage sliding+interactions)

after alot of research - inside this forum and outside - i believed it is not possible to use interactions with a fullpage.js slider (not the normal vertical scrolling, but the horizontal sliding)

than i found this website and it has a wonderful scrolling and sliding layout implemented with some interactions that seem to be “scroll into view”

so now we could try fo find out together how they realized this, deconstruct this wonderful website and make this thread a historic solution for all the upcoming generations, that will have exactly the same problem, in case AI doesnt take over the webdesign and we all end up homeless…

so lets be optimistic! bäm! :mechanical_arm:


https://www.monokroom.com/

i will begin with some basics:

  • they are using the fullpage.js (for example from alva rotrigo)
  • they have a good working vertical scroll and some interactions in the vertical sections, which are not working with fullpage.js except you add an scrollbar:true to the code → than the interactions in the vertical sections work

(note: the fullpage.js makes a fundamental distinction between “section” which are vertical elements with a vertical scroll and “slides” which a horizontal element that »slides« to the right and left)

  • so when you start to slide to the right or to the left “scroll into view” interactions are not longer working. my theory is this is because the strictly speaking sliding to the right is not a “scrolling” - so no support for scrolling interactions…

and exactly here is the problem and the common opinion that you cannot make this work

BUT the website i linked in my initial post does a very good job to make this work. so this is the quest(ion)!

:brain:

The code on the site you’ve shared is very clean - it looks like its been coded manually. I’m not sure if this is something that can be accomplished in Webflow, but I’d love for someone with potential knowledge in coding or javascript knowledge to chime in!

1 Like