How to pause timeline on start

[harp]

How to pause an animation on start? I want the mastertimeline to control when it plays.

Doesn't seem to work:
Here is my code for a timeline which connects to the mastertimeline and would play there

 

animateChars(domElement){

    let spans     = this.implementDomElement(domElement);
        this.tlLetters = new TimelineLite({});
        this.tlLetters.pause();

    this.tlLetters.set(spans, {autoAlpha: 0, opacity: 0, y: 40})
        .staggerTo(spans, 1, {opacity: 1, autoAlpha: 1, y: 0, ease: Power4.easeInOut}, '.03')
        .staggerTo(spans, 1, {delay: .5, opacity: 0, autoAlpha: 0, y: -40, ease: Power4.easeInOut}, '.03');


    return {
        tlLetters: this.tlLetters
    };

}

/*
*
* OBJECTIVE:
*
*  A MASTER TIME-LINE WILL CONTROL/HOLD ALL OTHER TIME-LINES:
*  tlLetters FROM LETTERANIMATIONS.JS
*  tlCaptions FROM CAPTIONSANIMATION.JS
*
*  TASK
*  1: CREATE MASTER TIME-LINE WITHIN A CLASS STRUCTURE
*
*
* */

import LetterAnimation from './LetterAnimations';
import CaptionAnimation from './CaptionsAnimation';

class IntroAnimations{
    constructor(){

        this.masterTimeline();

    };

    masterTimeline(){

        let tlMaster   = new TimelineMax({onComplete: function(){
            console.log(tlMaster);
        }});

        let tlLetters  = new LetterAnimation(document.querySelector('.company-name')).tlLetters;
        // let tlCaptions = new CaptionAnimation(document.querySelectorAll('.heading-skewY-from-bottom'));

        console.log(tlLetters.paused());
         tlMaster
             .add(tlLetters().paused(false))
        //     .add(tlCaptions())

    }
};

export default IntroAnimations;

[Dipscom]

Hi @harp,

 

To initialize a timeline that is paused from the get go, all you need to do is to pass a true to the paused attribute:

 

var myTl = new TimelineMax({ paused:true })

 

[harp]

okay got it thankssss!

I actually did it this way so i can set the elements to animate:

 

animateChars(domElement){

    let spans = this.implementDomElement(domElement);
        this.tlLetters = new TimelineLite({});
    this.tlLetters.set(spans, {autoAlpha: 0, opacity: 0, y: 40}); // so elements can have some settings
    this.tlLetters.pause();

    this.tlLetters
        .staggerTo(spans, 1, {opacity: 1, autoAlpha: 1, y: 0, ease: Power4.easeInOut}, '.03')
        .staggerTo(spans, 1, {delay: .5, opacity: 0, autoAlpha: 0, y: -40, ease: Power4.easeInOut}, '.03');


    return {
        tlLetters: this.tlLetters
    };

}

masterTimeline(){

    let tlMaster   = new TimelineMax({onComplete: function(){
        console.log('OKKKK');
    }});

    let tlLetters  = new LetterAnimation(document.querySelector('.company-name')).tlLetters;

    tlMaster
        .add(tlLetters.resume())
    //     .add(tlCaptions())

}

[OSUblake]

It would be nice if you could make a demo when you have a question. It's hard to understand code without seeing what it's doing. You can use a member plugin on a lot of coding sites by using these files.

https://codepen.io/GreenSock/pen/OPqpRJ

 

You're still trying to use a class like a function. A class is an object. If you're not putting stuff on 'this', there is no point in using one. 

 

I don't understand the return statement here. Who is calling it, and what is being done with the returned value?

 

animateChars(domElement){

    let spans     = this.implementDomElement(domElement);
        this.tlLetters = new TimelineLite({});
        this.tlLetters.pause();

    this.tlLetters.set(spans, {autoAlpha: 0, opacity: 0, y: 40})
        .staggerTo(spans, 1, {opacity: 1, autoAlpha: 1, y: 0, ease: Power4.easeInOut}, '.03')
        .staggerTo(spans, 1, {delay: .5, opacity: 0, autoAlpha: 0, y: -40, ease: Power4.easeInOut}, '.03');


    return {
        tlLetters: this.tlLetters
    };

}

 

That said, if your master timeline is paused, so will what you add to it.

 

 

 

So here's an example of how a class might look, complete with methods and properties.

 

class Box {
  
  constructor(selector) {
    
    this.element = document.querySelector(selector);
    
    TweenLite.set(this.element, { autoAlpha: 0 });
    
    this.fadeAnimation = new TimelineMax({ paused: true })
      .to(this.element, 1, { autoAlpha: 1 })        
  }
    
  moveTo(x, y) {
    return TweenLite.to(this.element, 0.5, { x, y });
  }
  
  fadeIn() {
    this.fadeAnimation.play();
    return this;
  }
  
  fadeOut() {
    this.fadeAnimation.reverse();
    return this;
  }
}

 

 

Now you can use it like this.

 

// Create a new box and fade it in
const box = new Box("#foo").fadeIn();

// Now you can use its methods
box.moveTo(500, 500);
box.fadeOut();

// It's a class, so you can create as many instances as you want
const box1 = new Box("#box1");
const box2 = new Box("#box2");
const box3 = new Box("#box3");

// You can even use it a timeline
const tl = new TimelineMax({
    onComplete: box.fadeOut,
    callbackScope: box
  })
  .to(box.element, 1, { rotation: 360 })
  .add(box.moveTo(300, 200))

 

 

Simple demo

 

See the Pen 1cad8bc19f4755835e16c88fbbc14e0e by osublake (@osublake) on CodePen

 

[harp]

Okay thats so awesome! Thank you!

I was trying to create each module for a certain timeline and then add to a final module which is the master timeline but I guess I'm overkilling it!

Your example is great and I'll follow that.

Thank you OSUblake