Clipping path transition between sections with fullPage.js

Question

I would like to have a clipping animation with the SVG clipping path that would hide the first section and show the second while animating using fullPage.js.

So this is similar to this question: fullpage JS animation on section

yet I would like to have controlled animation with specific duration (so the transition is smooth).

What I know or have tried now:

FullPage.js onLeave and afterLoad callbacks will have to be used. If I prevent scrolling in onLeave event I can call silentMoveTo only in afterLoad event yet I need what's in the next two points.
Two sections cannot be active (CSS class) with fullPage.js (so for example I would change the section 2 opacity from 0 to 1 as the animation reveals it, while section 1 would be hidden vice versa and the background clipping path would move to top to hide the section 1 image (SVG).
I've tried to animate the clipping path (have similar working example) yet of course the content of the section 2 below is not displayed. Calling silentMoveTo to show section 2 after the animation is not usable so it will have to be synchronized with say 50% of animation duration passed.

What would be the best approach? I have to use fullPage.js (by request, built in WordPress theme used). Ideally I plan to use a timeline in GreenSock javascript library with a callback on animation end to properly signalize fullPage.js main object that active section should now be #2.

ADDED: you can see one approach of using transitions with GreenSock here:

https://youtu.be/gE-Yuu2eEio?t=1694

yet this is the animation AFTER the second section loads. I want to have an animation of the first section contents that at the same time reveals the second section (I am aware of Fading Effect fullPage.js extension, not the solution to this).

score 0 · Answer 1 · answered Oct 17 '19 at 15:22

So I guess I have to answer this myself.

Short answer: it's not possible to show two sections at the same time using fullPage.js as (it is) designed.

Long answer: you can at least mimick some kind of interaction e.g. longer animation during first section and then quickly show the second one. Like this (you cannot run this code due to removing unnecessary parts for discussion):

        var fullPageOBj = new $('#fullpage').fullpage({
            ...
            onLeave: function (origin, destination, direction) {
              dir = direction;
                    ...
              if(origin == 1 && destination == 2){
                    $.fn.fullpage.setAutoScrolling(false);
                    document.body.style.overflow = "hidden";
                    ...
                    TweenMax.to(bSvg, 2.7, { }, "section1");
                    ...
                }
                $.fn.fullpage && $.fn.fullpage.setLockAnchors && $.fn.fullpage.setLockAnchors('false');
            },
            afterLoad: function (origin, destination) {
                console.log("aL - origin: " + origin + ", destination: " + destination + ", direction: " + dir);
               if(destination == 1){
                    $("vc-section1").addClass("active");
                    ...
                }
                if(destination == 2){
                  TweenMax.to(bSvg, 0, { display: "block", onComplete: Delay2, delay: 3.2});              
                 function Delay2() {
                    $.fn.fullpage.setAutoScrolling(true);
                  $.fn.fullpage.silentMoveTo(2);
                    }
                }
            }
        }

The idea above is that the afterLoad event in fullPage.js is spawned practically immediately after onLeave event so you have to make sure to wait for animation in onLeave event function completes before afterLoad functions take place. So the above code includes spawning the Delay2 function that runs after an animation completes. The timing in afterLoad function is set to respect the time for an animation duration in onLeave function.

You'll have to play with the timings. Default transition time before sections in fullPage.js appears to be 700 ms.

The last idea would probably be to move animation to Section 2 - but the page is already without objects in Section 1 (to animate in transition to Section 2).

You're welcome to add to discussion.

Clipping path transition between sections with fullPage.js

1 Answers1