Skipping the animation when jumping more than one slide up/down

[joelstein]

Can fullPage.js be configured to skip the animation when navigating to a section that is not immediately before/after the current slide?

I've tried a couple of ways to accomplish this. For example, with custom navigation, I can compare the desired section's index against the current index and use silentMoveTo to skip the animation. But this doesn't work if the navigation is triggered another way (e.g., manually changing the URL's fragment or using a keyboard shortcut that jumps more than up/down).

I also tried using beforeLeave like this:

if ( ![origin.index - 1, origin.index + 1].includes(destination.index)) {
  window.fullpage_api.silentMoveTo(destination.index);
  return false;
}

But it doesn't quite work.

I think this would be a fantastic built-in option. Something like scrollToNonSiblings = false or something.

Or, if there was a way to return a string or boolean in beforeLeave that corresponds to the effect to use.

• false = cancel transition
• true = proceed with transition
• "scroll" = proceed with transition with the scrolling effect
• "fade" = proceed with transition with the fading effect
• "none" = proceed with transition by jumping straight to it without an animation
• etc.

[alvarotrigo]

I'm not sure if this is what you need, but I explained how to skip sections & slides on this article

Here's the codepen:
https://codepen.io/alvarotrigo/pen/yLVdNrb

If you don't want the section/slide to be visible while scrolling, you can consider hiding it using CSS and fullpage.js will totally ignore it.

[alvarotrigo]

Is this what you need?
https://codepen.io/alvarotrigo/pen/oNrogNr?editors=1111

I used the beforeLeave function in combination with the setScrollingSpeed method to make it work.

beforeLeave: function (origin, destination, direction, trigger) {
    if(origin.index !== destination.index -1 && origin.index !== destination.index + 1){
      fullpage_api.setScrollingSpeed(0);
    }else{
      fullpage_api.setScrollingSpeed(700);
    }
  },

(e.g., manually changing the URL's fragment or using a keyboard shortcut that jumps more than up/down).

Can you clarify a bit more in which scenarios you'd like to skip the transition?

I can only imagine things like:

• Click on "Home" or "End" buttons to jump to 1st or last
• Click on bullet navigations
• Click on item with a link to a hash that is not immediate

[joelstein]

Thanks! Setting the scrolling speed to 0 in these scenarios achieves the effect I was looking for.

Though there are several ways to navigate to sections that aren't immediate siblings (keyboard shortcuts, changing the URL hash), the one that our users mostly encounter is a custom "bullet" navigation. You can see it in this demo by clicking the 3rd bullet when on the 1st section.

This isn't a huge deal when you have a few sections, but ours has 62! So, we want to skip the sliding up animation when jumping from, say, the 1st section to the 10th.

For what it's worth, I think this would be a natural default for fullPage.js, or at least an option that's built-in.

Anyway, thanks for the tip! This works well enough for us. :)

[alvarotrigo]

For what it's worth, I think this would be a natural default for fullPage.js, or at least an option that's built-in.

Yeap, good point 👍
I think it can be added as an option. Thanks for the recommendation!

[alvarotrigo]

I've added this feature in fullpaeg.js 4.0.27! 🥳

The option is called skipIntermediateItems.
Here are the docs:
https://alvarotrigo.com/fullPage/docs/#skipintermediateitems

[joelstein]

Thanks! That's fantastic.

Can you think of any reason why this wouldn't work with the React package? I updated my dependencies, I can see that fullpage.js version 4.0.27 is installed, yet, adding skipIntermediateItems doesn't seem to do anything. Does the React package need to also be updated?

[alvarotrigo]

Can you think of any reason why this wouldn't work with the React package?

I haven't released a new version for React yet with the update :)
I'll let you know when I do.

[joelstein]

No rush, but do you have an ETA on when this will be available in the React build?

[alvarotrigo]

Published it just now! 🥳
Version 0.1.43 of React fullpage.js includes fullPage.js 4.0.28.