1

I want to achieve an effect similar to the one seen on the homepage of this website, in which the content of the current section scales down to reveal a coloured border before scrolling. I'm not sure what code this site uses for it's fullpage scrolling, but I want to use fullpage.js to achieve this.

Essentially, I want to be able to wait for a CSS animation to finish before the section scrolls to the next one.

My idea was to use the fullpage.js onLeave function, returning false to cancel the scroll event and then using fullpage_api.moveSectionUp() to move to the next section after a setTimeout (the CSS animation timing is always the same so I can just hardcode it into the timeout.

The Problem

I found the code in this SO answer to do almost exactly what I want, but the only problem is that the section only scrolls to the next section once you stop scrolling, meaning that if you don't stop scrolling for a few seconds, the scroll will be delayed further than the animation time.

Here is the code I'm using from that SO answer:

let done = false;
let animationTimeout;
let transitionTimeout;
let delay = 300;
let transitionTime = 300;

...

    onLeave: function (origin, destination, direction) {

        if (done) return ;

        // cancel any previous timeout as onLeave fires quite a bit.
        clearTimeout(animationTimeout);
        clearTimeout(transitionTimeout);

        // SCALING ANIMATION HERE (done by adding a class to the section)

        animationTimeout = setTimeout(()=>{

            // deal with scroll
            done = true;

            if (direction === 'down') {

                fullpage_api.moveSectionDown();

            } else {

                fullpage_api.moveSectionUp();

            }

            transitionTimeout = setTimeout(()=>done = false, transitionTime);

        }, delay);

        return done;

    },

You can also see in this JS Fiddle that fullpage.js won't scroll to the next section until you stop scrolling...

So...

How can I wait for a CSS animation to finish before fullpage.js scrolls to the next section?

JJ Gerrish
  • 812
  • 1
  • 10
  • 25
  • See my answer in this same question: https://stackoverflow.com/a/36182162/1081396 – Alvaro Mar 16 '19 at 11:17
  • @Alvaro Your accepted answer to that question only works for the first scroll down for me. A delay is added to the first one but scrolling down to the 3rd screen has no delay... – JJ Gerrish Mar 18 '19 at 10:35
  • Yeah. That'st just a example of how to implement it. See the code and apply it to as many sections as you want with the delays you need for each of them. – Alvaro Mar 18 '19 at 15:58

0 Answers0