Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
harp

Getting error while pausing and playing a timeline from parent timeline

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

The codepen isn't really working to test this out because I'm using es6 modules and webpack. 

Here is the code:
I'm trying to play this.tlTest when the user clicks a button, it works but it works after a good 20 seconds or so and not sure why it's doing that.

If you want I can send you the whole project as a zipped file.
 

import SplitText from './SplitText';
// import { TimelineLite } from 'gsap';

class IntroAnimations{
    constructor(){

        this.ctaLoad = document.querySelector('#js-cta-load');
        this.tlTest = new TimelineLite({paused: true});
        this.splitVal_title = new SplitText().implementDomElement(document.querySelector('#js-company-name')),
        this.splitVal_companyInfo = new SplitText().implementDomElement(document.querySelector('#js-loading-caption')),
        this.masterTimeline();
        this.ctaLoad.addEventListener('click', this.playTimeline.bind(this));

    };

    playTimeline(){
        this.tlTest.play();
        console.log('playyy');
    }

    landTimeline(){

        console.log('okkkk');

        let loadingPage     = document.querySelector('.loading'),
            jsLogo          = document.querySelector('#js-logo'),
            jsMenuToggle    = document.querySelector('#js-menu-toggle');

        this.tlTest
            .staggerTo(this.splitVal_title, 1.5, {opacity: 0, autoAlpha: 0, x: 30, ease: Power4.easeOut}, 0.08)
            .staggerTo(this.splitVal_companyInfo, 7, {opacity: 0, autoAlpha: 0, x: 30, ease: Power4.easeOut}, 0.03, '-=1.35')
            .to(loadingPage, 1.7, {opacity: 0, autoAlpha: 0, ease: Power4.easeOut})
            .to([jsLogo, jsMenuToggle], 1, {opacity: 1, autoAlpha: 1, ease: Power4.easeOut}, '-=.5');

        return this.tlTest;
    }


    loadTimeline(){


        let tlload = new TimelineLite(),
            counterHolder = document.querySelector('#js-interval-counter'),
            navigationItems = document.querySelectorAll('.navigation__items'),
            counter = { value: 0 },
            el = counterHolder;


        tlload
            .set([this.splitVal_title, this.splitVal_companyInfo], {autoAlpha: 0, opacity: 0, x: 34})
            .to(counter, 3, {value: 100, onUpdate: function () {
                el.textContent = Math.ceil(counter.value)+'%';
            }, ease:Power3.easeInOut})
            .to(el, .6, {opacity: 0, autoAlpha: 0})
            .set(el, {display: 'none'})
            .staggerTo(this.splitVal_title, 1.5, {opacity: 1, autoAlpha: 1, x: 0, ease: Power4.easeOut}, 0.08, '-=.55')
            .staggerTo(this.splitVal_companyInfo, 7, {opacity: 1, autoAlpha: 1, x: 0, ease: Power4.easeOut}, 0.03, '-=1.35')
            .addLabel('title-caption-finished', '-=6.5')
            .to(navigationItems, 3, {opacity: 1, autoAlpha: 1, ease: Power4.easeOut}, 'title-caption-finished')
            .to(this.ctaLoad, 3, {opacity: 1, autoAlpha: 1, ease: Power4.easeOut}, 'title-caption-finished');


        return tlload;

    };



    masterTimeline(){

        console.log('testing');

        new TimelineMax()
            .add(this.loadTimeline())
            .add(this.landTimeline());
    };
};

export default IntroAnimations;

See the Pen editor by harp30 (@harp30) on CodePen

Link to comment
Share on other sites

30 minutes ago, harp said:

it works after a good 20 seconds or so and not sure why it's doing that.

 

It looks to me like your loadTimeline() is approximately 20 seconds long and the landTimeline() is playing in sequence on the master timeline as it should. If you want to jump to that part of the master timeline on click, you can add a label and play to or from that point.

  • Like 3
Link to comment
Share on other sites

OHHH. Okay I thought by clicking on the button the landTimeline() would run from its position of start. So, it doesn't run in that way instead I have to make it jump to a certain position because its connected to the masterTimeline()?

 

Link to comment
Share on other sites

and how to add a label to play at a certain point?

Link to comment
Share on other sites

You can also play between labels with the tweenFromTo() method.

 

See the Pen EKZjpo by PointC (@PointC) on CodePen

 

  • Like 4
Link to comment
Share on other sites

Okay thank you!

  Added a label in master timeline and then playing it via playTimeline but still taking a while to start up, not sure what I did wrong..


 

/*
*
* OBJECTIVE: play animation and then play remaining animation when user clicks btn
*
*
*
**************************************
* ERROR: playTimeline(){
        this.tlMaster.play('label'); //did this
        console.log('hii');
    }
**************************************
*
*
* */
import SplitText from './SplitText';
// import { TimelineLite } from 'gsap';

class IntroAnimations{
    constructor(){

        this.ctaLoad = document.querySelector('#js-cta-load');
        this.tlTest = new TimelineLite();
        this.splitVal_title = new SplitText().implementDomElement(document.querySelector('#js-company-name')),
        this.splitVal_companyInfo = new SplitText().implementDomElement(document.querySelector('#js-loading-caption')),
        this.tlMaster = new TimelineMax();
        this.masterTimeline();
        this.ctaLoad.addEventListener('click', this.playTimeline.bind(this));

    };

    playTimeline(){
        this.tlMaster.play('label'); //did this
        console.log('hii');
    }

    landTimeline(){

        let loadingPage     = document.querySelector('.loading'),
            jsLogo          = document.querySelector('#js-logo'),
            jsMenuToggle    = document.querySelector('#js-menu-toggle');

        this.tlTest
            // .addLabel('user-clicked')
            .staggerTo(this.splitVal_title, .3, {opacity: 0, autoAlpha: 0, x: 5, ease: Power4.easeOut}, 0.02)
            .staggerTo(this.splitVal_companyInfo, .2, {opacity: 0, autoAlpha: 0, x: 5, ease: Power4.easeOut}, 0.02, '-=.2')
            .to(loadingPage, .7, {opacity: 0, autoAlpha: 0, ease: Power4.easeOut}, '-=.7')
            .to([jsLogo, jsMenuToggle], 1, {opacity: 1, autoAlpha: 1, ease: Power4.easeOut}, '-=.6');

        return this.tlTest;
    }


    loadTimeline(){


        let tlload = new TimelineLite(),
            counterHolder = document.querySelector('#js-interval-counter'),
            navigationItems = document.querySelectorAll('.navigation__items'),
            counter = { value: 0 },
            el = counterHolder;


        tlload
            .set([this.splitVal_title, this.splitVal_companyInfo], {autoAlpha: 0, opacity: 0, x: 34})
            .to(counter, 3, {value: 100, onUpdate: function () {
                el.textContent = Math.ceil(counter.value)+'%';
            }, ease:Power3.easeInOut})
            .to(el, .6, {opacity: 0, autoAlpha: 0})
            .set(el, {display: 'none'})
            .staggerTo(this.splitVal_title, 1.5, {opacity: 1, autoAlpha: 1, x: 0, ease: Power4.easeOut}, 0.08, '-=.55')
            .staggerTo(this.splitVal_companyInfo, 7, {opacity: 1, autoAlpha: 1, x: 0, ease: Power4.easeOut}, 0.03, '-=1.35')
            .addLabel('title-caption-finished', '-=6.5')
            .to(navigationItems, 3, {opacity: 1, autoAlpha: 1, ease: Power4.easeOut}, 'title-caption-finished')
            .to(this.ctaLoad, 3, {opacity: 1, autoAlpha: 1, ease: Power4.easeOut}, 'title-caption-finished');
            // .addLabel('load-animations-done');

        return tlload;

    };



    masterTimeline(){

        console.log('testing');

        this.tlMaster
            .add(this.loadTimeline())
            .add('label') // and did this..
            .add(this.landTimeline());
    };
};

export default IntroAnimations;


 

Link to comment
Share on other sites

As far as I can see from the code, your tlMaster timeline is not paused so that will just start playing automatically. Are you sure your button click handler is working correctly? I'm really not sure what to tell you.

 

As we've mentioned in your other threads, it is so hard to offer assistance by just looking at pasted code without a demo. It doesn't have to be your actual project. In fact, it's preferable that it isn't. We're only looking for just enough code to demonstrate the problem or question. Some plain divs and minimal code like I used in my demo would be great. I'll put it here again for you so you can see that everything works fine playing at a label. Please feel free to fork this demo and make some changes so it's more like your project.

 

See the Pen wmwzbE by PointC (@PointC) on CodePen

Thanks.

 

  • Like 2
Link to comment
Share on other sites

Okay got it working in codepen. Sorry, I'm new to all this thats why make mistake of not putting on codepen.

Here is the link:
working but not controlled by the click. Only want the landtimeline  to run when user clicks btn
 

See the Pen WzedpM?editors=0010 by harp30 (@harp30) on CodePen

 

Link to comment
Share on other sites

I'm creating a new forum for this with codepen.. and ill make it less confusing - my mistake.

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.
×