CODEWITHSUNDEEP
jqueryfullpage.js
Trollwut
Trollwut

Reputation: 551

How to animate things before scrolling to another section?

The case is pretty simple: There is a website with several sections. So on each scrolling, another section appears.

Now some sections may have a textblock, which should fly in animated.

If there is no animated textblock, it should have the normal behaviour of scrolling down:

  1. st scroll should just scroll down to the next section.

If there is an animated textblock, the scrolling should be in this order:

  1. st scroll should animate the textblock; also stay in current section

  2. nd scroll then scrolls down to the next section.

Is there a simple way to achieve this?

Upvotes: 0

Views: 104

Answers (2)

Alvaro
Alvaro

Reputation: 41595

Besides using callbacks as named by @dieend, which is the best way to deal with javascript animations and actions, you can also use the state classes added by fullpage.js such as the active class added to the active section or the fp-viwing-x-y added to the body.

This way you can deal with your animations with CSS alone.

You have a list of state classes on the docs

And here a video tutorial about how to use the class added to the body to create animations.

Upvotes: 0

dieend
dieend

Reputation: 2299

From https://github.com/alvarotrigo/fullPage.js#callbacks on cancelling scroll

$('#fullpage').fullpage({
    onLeave: function(index, nextIndex, direction){
        //it won't scroll if the destination is the 3rd section
        if(nextIndex == 3){
            return false;
        }
    }
});

You can change the onLeave callback with parameters or methods that determine whether the flying text exists and then continue to the next section, or the flying text needs to fly in and cancel going to the next section.

Upvotes: 3

Related Questions