Streaming live at 10am (PST)

Horizontal scrolling with fullpage.js

Hey there,

I am currently designing and building a website with horizontal scrolling, and I am using the amazing fullpage.js by Alvaro Trigo.

Although the plugin is really great, Alvaro’s documentation and readiness to help are not so… (might be because I am not that of a skilled coder…)

Anyway…
I am trying unsuccessfully to do these things:

  1. Make the left/right navigation arrows to work
  2. Trigger animations when a slide is loaded
  3. create “current” state for a slide link

Is there anyone with some fullpage.js experience that might be able to help?
Thanx a lot!

https://preview.webflow.com/preview/fullpage-js-example?preview=82c4a1201b6dd6bd4d6064599ff5c12d

http://fullpage-js-example.webflow.io/

Tommorow (26.7) -

Later you find this under “workshops”

1 Like

So, I’ve watched the workshop and could get my arrows to work.
But, there’s no answer on how to trigger an animation or create a “current” state for a slide link when I use Horizontal Scrolling with fullpage.js

Anyone has an idea?

1 Like

Scroll into View trigger works fine with fullpage.js

not with the scroll horizontally :confused:

never tried horizontal sorry let me try :slight_smile: and get back to you if possible.

1 Like

Hey guys!
Alvaro here :slight_smile:

I’m know I’m late! But better later than never :slight_smile:

Alvaro’s documentation and readiness to help are not so…

Uh! I’m all ears! How could I make the docs easier for people like you to understand?

So far, regarding your questions with horizontal slides and fullPage.js I’ve created this video tutorial:

And this clonable project in webflow:

2 Likes

ouh thanks so much for this explanation!
but do interaction now work with this horicontal slidings?

on the vertically fullpage scrolling interaction are working well for me, but i’m asking now specifally for this scenario which you showed in your tutorial here. are “scrolled into view” interaction possible here?

thanks!

ps. and is it possible to change the style of these arrows?!

installed it last night, following your tutorial and everything worked out
but the interactions are not working -> in the horicontal scrolling slides only
is this really an issue?!

is there no solution?

Sure!

The easiest way would be to use the CSS state classes added to the body and slide elements.
Check more about it on the docs:

Here’s a video I did a long time ago about conditional CSS to trigger animations:

You can also use JavaScript to fire them by using fullPage.js callbacks such as the onSlideLeave or afterSlideLoad ones.
More about it on the the fullpage.js documentation

I don’t think it is possible using Webflow directly.
Perhaps you could try detecting the scroll event on the slider wrapper, but you would have to use the fulPage.js option css3: false for that.