Timeline in function ignores paused

[t.marty]

Hello Everyone

 

I try to setup a structured way of my animations using functions.

Now my master timeline is called by init() and as you can see it has the paused: true parameter.

As you can see this is ignored and timeline starts as soon as the init function is called.

 

Why is this?

 

Here is also a Pen on GSAP 2:

See the Pen GRRLjwe by Dollique (@Dollique) on CodePen

See the Pen abbxBBj by Dollique (@Dollique) on CodePen

[OSUblake]

You're making the same mistake here.

 

 

I don't know what you're trying to do here. If you're trying to add the animation from your baseAnimation function to your master timeline, then you would need to return it.

 

function init() {
    var tl = gsap.timeline({
        paused: true
    })
  
    .add(baseAnimation());

    return tl;
}

function baseAnimation() {
  console.log("started");
  
  return gsap.timeline()
    .to(".test",{y:20},"+=1");
  
  
}

 

If you're trying to call your baseAnimation function when the timeline plays, and NOT add it to the master timeline, then you need to remove the ().

 

function init() {
    var tl = gsap.timeline({
        paused: true
    })
  
    .add(baseAnimation);

    return tl;
}

 

[OSUblake]

Please see the concepts used in this article. They will work the same for v3.

https://css-tricks.com/writing-smarter-animation-code/