CODEWITHSUNDEEP
javascriptanimationgsap
SirBartlesbyThe3rd
SirBartlesbyThe3rd

Reputation: 23

GreenSock TimelineMax starting early

I have been trying to get the animation to fire off on click, I have created the animated via TimelineMax. I can't see why but it keeps firing off the first instance of this animation, there are 5 .blackout-panel and it plays the animation automatically for the first .blackout-panel, but I have no idea why - I want the full animation to be controlled by on click.

var showBarsTL = new TimelineMax({ paused: true, onComplete: killAnimation });

$('.portfolio-panel').on("click", function () {
    showBarsTL.play()
});

showBarsTL.add (TweenMax.staggerTo(".blackout-panel", 0, {y:100+ '%', onStart: "", onStartParams:["{self}"], ease: Power1.easeInOut}, 0.1275, 0));
showBarsTL.add (TweenMax.from(".blackout-panel", 0, {css:{top:"auto", bottom:"0"}}));
showBarsTL.add (TweenMax.staggerTo(".blackout-panel", 0, {css:{height:"0", bottom:"0", top:"auto"}, delay: 0.1275, ease: Power1.easeInOut}, 0.1275));

function killAnimation() {
    showBarsTL.clear();
}

I have created a codePen to demonstrate this: http://codepen.io/Tekkie/pen/XpBOYV/?editors=1010

Any guidance would be appreciated. Also my killAnimation function doesn't seem to be getting fired.

EDIT: 1 - I have resolved the pausing issue by putting a delay. My new JS is as follows:

var $blackoutPanels = $('.blackout-panel');
var showBarsTL = new TimelineMax({ paused: true });

showBarsTL
.add (TweenMax.staggerTo($blackoutPanels, **0.1275**, {y:100+ '%', onStart: "", onStartParams:["{self}"], ease: Power1.easeInOut}, 0.1275, 0))
.add (TweenMax.from($blackoutPanels, 0, {css:{top:"auto", bottom:"0"}}))
.add (TweenMax.staggerTo($blackoutPanels, 0, {css:{height:"0", bottom:"0", top:"auto"}, delay: 0.1275, ease: Power1.easeInOut}, 0.1275));

$('.portfolio-panel').on("click", function () {
    showBarsTL.play();
});

EDIT: 2 - I have resolved all issues using the following JS:

    var $blackoutPanels = $('.blackout-panel');
    var showBarsTL = new TimelineMax({
        paused: true
    });

    showBarsTL
        .add(TweenMax.staggerFrom($blackoutPanels, 0, {
            yPercent: -100,
            top: -100 + "%",
            onStartParams: ["{self}"],
            ease: Power0.easeInOut
        }, 0, 0))
        .add(TweenMax.staggerTo($blackoutPanels, 0.3, {
            yPercent: 0,
            top: 0,
            onStartParams: ["{self}"],
            ease: Power1.easeInOut
        }, 0.125, 0))
        .add(TweenMax.to($blackoutPanels, 3, {
            yPercent: +100,
            top: +100 + "%",
            onStartParams: ["{self}"],
            delay: 0.3,
            ease: SlowMo.ease.config(0.4, 1, false)
        }, 0.3, 0))
        .add(TweenMax.to($blackoutPanels, 0, {
            yPercent: -100,
            top: -100 + "%",
            delay: 0.375
        }));

    $('.portfolio-panel').on("click", function() {
        showBarsTL.restart(false, false);
    });

Upvotes: 2

Views: 504

Answers (1)

gianni
gianni

Reputation: 1357

Try to set the pause like this:

var showBarsTL = new TimelineMax({onComplete: killAnimation }).paused(true);

and in your function:

$('.portfolio-panel').on("click", function () {
showBarsTL.paused(false);
});

Upvotes: 1

Related Questions