Jump to content
Search Community

onComplete fired at the beginning of the timeline instead of at the end

romain.gr test
Moderator Tag

Recommended Posts

Hi, 

 

I've been struggling for quite a while now (few hours) on that issue and it doesn't make any sense.

 

here is the website with the issue http://romaingranai.be/pb/about.html

 

First you have the first animation (logo, nav and footer) then, when you 'keydown' or 'scrolldown' (with the console open), you will see a console log(Allow scroll : true), the problem is that console log should come AFTER the second animation fires (triggered by the keydown or mousewheel). I've tried to call the function at the end of the using .call() or .add() without success neither.

 

You can see the correct animation if, from the about section you scroll up to the first screen and then scroll down again and then it works properly. I don't understand at all what's going wrong.

 

The timeline is the homeToAbout

 

Thank you

 

here is the code:

var homeAnimIsFinished = false;

///

$('#fullpage').fullpage({
    scrollingSpeed: 1000,
    touchSensitivity: 2000,
    easingcss3: 'cubic-bezier(0.58, 0.56, 0.39, 0.97)',
    onLeave (origin, destination, direction){
        if(origin.index < destination.index){ // scroll down
            $(destination.item).prevAll().removeClass('up down').addClass('up');
            $(destination.item).removeClass('up down').addClass('down');
            $(destination.item).nextAll().removeClass('up down').addClass('down');
        };
        if(origin.index > destination.index){ // scroll up
            $(destination.item).nextAll().removeClass('up down').addClass('down');
            $(destination.item).removeClass('up down').addClass('up');
            $(destination.item).prevAll().removeClass('up down').addClass('up');
        }

        if(origin.index <= 3 && destination.index == 4){
            var animTitle = gsap.timeline({delay: .75});
                animTitle.from($('.section--investment--1 h2 span'), {autoAlpha: 0, y: '20px', duration: 2, ease: Power4.easeOut, stagger:{
                    each: .2
                }});
        }

        $('.nav a').parent('li').removeClass('active');

        var section = $(destination.item).data('section');
        $('[data-section-name="'+ section +'"]').parent('li').addClass('active');

        var top = $('nav').find('li.active').offset().top - 50;
        $('.nav').css('--arrow-top', top + 5 + 'px');
    },

    afterLoad(origin, destination, direction) {

        if(origin.index > 0 && destination.index == 0){
            fullpage_api.setAllowScrolling(false);
            fullpage_api.setKeyboardScrolling(false);
            homeToAbout.restart().pause();
            console.log('now');
        }

    }

});

fullpage_api.setAllowScrolling(false);
fullpage_api.setKeyboardScrolling(false);

function setScrollTrue(){
    fullpage_api.setAllowScrolling(true);
    fullpage_api.setKeyboardScrolling(true);
    console.log('Allow scroll : True');
};
function goToAboutSilent(){
    fullpage_api.silentMoveTo(2)
};
function setOpenAnimFinished(){
    homeAnimIsFinished = true;
};

var homeToAbout = gsap.timeline({paused: true, onComplete: setScrollTrue});
var openAnim = gsap.timeline({paused: true, onComplete: setOpenAnimFinished});

homeToAbout .to('.transition-about', 2, {autoAlpha: 1, display: 'block'})
            .set('h1', {transition: 'none', autoAlpha: 0, y: '100px'})
            .call(goToAboutSilent)
            .to('.transition-about', 2, {top: '30%', left: '70%', width: '40vh', height: '50vh', ease: Expo.easeInOut})
            .set('.transition-about', {autoAlpha: 0, display: 'none'})
            .to('h1', 3, {autoAlpha: 1, y: 0, ease: Expo.easeInOut}, '-=1.25')
            .set('h1', {clearProps: 'all'});

openAnim.to('.curtain', .5, {autoAlpha: 0, display: 'none'})
        .from($('.triangles polygon'), {autoAlpha: 0, duration: 5, ease: Power4.easeOut, stagger: {
            from: 'center',
            amount: .5
        }})
        .from($('.logo-text .cls-1'), {autoAlpha: 0, duration: 5, ease: Power4.easeOut, delay: -5,  stagger: {
            from: 'center',
            amount: .5
        }})
        .from('.footer', {autoAlpha: 0, y: '20px', duration: 2, ease: Power4.easeOut}, '-=3')
        .from($('.nav li'), {autoAlpha: 0, x: '-20px', duration: 2, ease: Power4.easeOut, stagger: {
            each: .2,
        }}, '-=3')
        .set('.footer', {clearProps: 'all'})
        .add(function(){
            $('.footer').addClass('footer--hidden');
            $('.nav').addClass('nav--active');
        }, '+=.1');


openAnim.play();

$('html').on('mousewheel', function(event) {
    if(event.deltaY < -10 && $('body').find('.section.active').hasClass('section--home') && homeAnimIsFinished){
        homeToAbout.play();
    }
});

$(window).on('keydown', function(){
    if($('body').find('.section.active').hasClass('section--home') && homeAnimIsFinished){
        homeToAbout.play();
    };
});

$('.section--dualscreen__right').on('click', function(e){
    e.preventDefault();
    e.stopPropagation();
    
    $(this).parents('.section').addClass('section--dualscreen--open');
});

$('.show-more a').on('click', function(e){
    e.preventDefault();
    e.stopPropagation();

    if(!$(this).parents('.section').hasClass('section--dualscreen--open')){
        $(this).parents('.section').addClass('section--dualscreen--open');
    } else {
        $(this).parents('.section').removeClass('section--dualscreen--open');
    }
});

$('.section--dualscreen__left').on('click', function(){
    $(this).parents('.section').removeClass('section--dualscreen--open');
});



$('[data-screen]').on('click', function(e){
    console.log('click');
    var screen = $(this).data('screen');
        e.preventDefault()
        fullpage_api.moveTo(screen);

    if($(this).hasClass('about') && $('body').find('.section.active').hasClass('section--home')){
        homeToAbout.play();
    }

});

 

Link to comment
Share on other sites

Hey romain.

 

That's a good bit of code to wade through, especially on a live site. Can you please create a minimal demo of the issue using something like CodePen? I think that will help you think through it and also make it easier for us to help you. The thread below talks about how to do so:

 

Link to comment
Share on other sites

That's actually the part of the code used for the animation

 

I just want to know why the function setScrollTrue() is fired at the beginning of the homeToAbout timeline, even thought it's set to fire onComplete, can you see any writing mistake? somewhere?

 

I'm going to create a Codepen but from a first view, do you have any idea?

 

var homeAnimIsFinished = false;

///

$('#fullpage').fullpage({
    scrollingSpeed: 1000,
    touchSensitivity: 2000,
    easingcss3: 'cubic-bezier(0.58, 0.56, 0.39, 0.97)'
});

fullpage_api.setAllowScrolling(false);
fullpage_api.setKeyboardScrolling(false);

function setScrollTrue(){
    fullpage_api.setAllowScrolling(true);
    fullpage_api.setKeyboardScrolling(true);
    console.log('Allow scroll : True');
};
function goToAboutSilent(){
    fullpage_api.silentMoveTo(2)
};
function setOpenAnimFinished(){
    homeAnimIsFinished = true;
};

var homeToAbout = gsap.timeline({paused: true, onComplete: setScrollTrue});
var openAnim = gsap.timeline({paused: true, onComplete: setOpenAnimFinished});

homeToAbout .to('.transition-about', 2, {autoAlpha: 1, display: 'block'})
            .set('h1', {transition: 'none', autoAlpha: 0, y: '100px'})
            .call(goToAboutSilent)
            .to('.transition-about', 2, {top: '30%', left: '70%', width: '40vh', height: '50vh', ease: Expo.easeInOut})
            .set('.transition-about', {autoAlpha: 0, display: 'none'})
            .to('h1', 3, {autoAlpha: 1, y: 0, ease: Expo.easeInOut}, '-=1.25')
            .set('h1', {clearProps: 'all'});

openAnim.to('.curtain', .5, {autoAlpha: 0, display: 'none'})
        .from($('.triangles polygon'), {autoAlpha: 0, duration: 5, ease: Power4.easeOut, stagger: {
            from: 'center',
            amount: .5
        }})
        .from($('.logo-text .cls-1'), {autoAlpha: 0, duration: 5, ease: Power4.easeOut, delay: -5,  stagger: {
            from: 'center',
            amount: .5
        }})
        .from('.footer', {autoAlpha: 0, y: '20px', duration: 2, ease: Power4.easeOut}, '-=3')
        .from($('.nav li'), {autoAlpha: 0, x: '-20px', duration: 2, ease: Power4.easeOut, stagger: {
            each: .2,
        }}, '-=3')
        .set('.footer', {clearProps: 'all'})
        .add(function(){
            $('.footer').addClass('footer--hidden');
            $('.nav').addClass('nav--active');
        }, '+=.1');


openAnim.play();

$('html').on('mousewheel', function(event) {
    if(event.deltaY < -10 && $('body').find('.section.active').hasClass('section--home') && homeAnimIsFinished){
        homeToAbout.play();
    }
});

$(window).on('keydown', function(){
    if($('body').find('.section.active').hasClass('section--home') && homeAnimIsFinished){
        homeToAbout.play();
    };
});

 

Link to comment
Share on other sites

3 minutes ago, romain.gr said:

Here is the Codepen, it works perfectly, it's the exact same code, I have just copy/past everything. I don't undertsand

To fix error like this, try cutting things out, piece by piece, until you have only the relevant parts. Then continue cutting things away until you figure out exactly what is causing the issue :) 

  • Like 1
Link to comment
Share on other sites

3 minutes ago, ZachSaucier said:

To fix error like this, try cutting things out, piece by piece, until you have only the relevant parts.

Good advice. I usually try to cut things in half. Chop off the bottom 50% of code - no problems - okay it must be in the other half. Then cut that problematic chunk of code in half and so on... Might take a little while, but you'll find it.

 

The only other thing I thought of was setting the progress() quickly to 1 and back to 0 without suppressing events. I don't see that anywhere in the code, but maybe it's a piece we can't see. 

 

Happy bug hunting. :)

 

  • Like 3
Link to comment
Share on other sites

Ok so it looks like it was the gsap version the problem, I was using the 3.0.5 and in the pen it's the 3.2.5, but why? is there something in my code that might work with the newer version of gsap and not with the 3.0.5? I'm really confused now, but still thank for helping me, I've been re-reading my code and actually my logic was good. Thanks a lot, but if you could (if possbile obviously) explain me what could be the problem (from my code point of view) with gsap 3.0.5 and working with the 3.2.5, I would be gratefull.

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...