TimelineLight endTime() keeps in increasing

[colouredFunk]

I'm using GSAP with TypeScript, and every time I load the page with TimelineLight on .endTime() keeps on increasing, I'm presuming this is because it's not getting disposed of correctly.

 

I've tried all of the following 

 

ngOnDestroy() {
    console.log("PAGE DESTROY")
    TweenMax.killAll();
    this.tl.clear();
    this.tl.remove();
    this.tl.invalidate();
    this.tl.kill();
    this.tl = null;
  }

 

 

This is the code I'm using to run the animation

  ngOnInit() {
    let speed = 0.75;
    let hold = 2;
    this.tl.addLabel('listen');
    this.tl.to(this.step1.nativeElement, speed, {'margin-left': 0, opacity: 1});
    this.tl.to(this.step1.nativeElement, speed, {'margin-left': -100, opacity: 0}, '+=' + hold);
    this.tl.addLabel('discover');
    this.tl.to(this.step2.nativeElement, speed, {'margin-left': 0, opacity: 1});
    this.tl.to(this.step2.nativeElement, speed, {'margin-left': -100, opacity: 0}, '+=' + hold);
    this.tl.addLabel('create');
    this.tl.to(this.step3.nativeElement, speed, {'margin-left': 0, opacity: 1});
    this.tl.to(this.step3.nativeElement, speed, {'margin-left': -100, opacity: 0}, '+=' + hold);
    this.tl.addLabel('launch');
    this.tl.to(this.step4.nativeElement, speed, {'margin-left': 0, opacity: 1});
    this.tl.to(this.step4.nativeElement, speed, {'margin-left': -100, opacity: 0}, '+=' + hold);
    this.tl.addLabel('care');
    this.tl.to(this.step5.nativeElement, speed, {'margin-left': 0, opacity: 1});

    this.totalTime = this.tl.endTime();
    console.log('this.tl.totalTime()' + this.tl.totalTime());
    console.log('this.tl.endTime()' + this.tl.endTime());

  }

 

[Carl]

Hi and welcome to the GreenSock forums,

 

I haven't seen the endTime() increase after clearing a timeline.

 

 

Can you please post a reduced test case so we can run and test what is happening?

Be sure to use the latest version of TweenMax (2.0.1)

 

 

Thanks

 

 

 

[colouredFunk]

Thanks, I will try and set one up on Plunker as it's using Angular with  https://www.npmjs.com/package/gsap latest version

[GreenSock]

Welcome to the forums, @colouredFunk. Like @Carl, I'm a bit confused and I'm eager to see a demo. I'm sure we'll be able to explain the behavior once we see that. Just keep in mind that endTime() is in relation to the parent timeline's playhead position (where it'd be when the nested timeline ends). 

[colouredFunk]

Thanks for the reply. If I didn't use endTime() How would I get the total time of the anination sequence, totalTime() returns 0 ... (see the code above)

[PointC]

I think you're looking for totalDuration(). More info:

 

https://greensock.com/docs/TimelineMax/totalDuration()

 

Happy tweening.

 

[colouredFunk]

Yep that has solved it!

 

Not sure a what endTime() was doing?

[GreenSock]

endTime() is like startTime(), but for the end

 

Like, if a 2-second animation has a startTime() of 1, then its endTime() would be 3 (assuming a timeScale() of 1). 

 

Make sense? 

[PointC]

I thought endTime() was the value we entered into the Project Splinter time machine so we can splinter out to a new time/location and battle the Army of the 12 Monkeys to prevent the plague. ?

 

Just a little sci-fi geek humor/reference for anyone else watching 12 Monkeys on Syfy. ?

[GreenSock]

4 minutes ago, PointC said:

I thought endTime() was the value we entered into the Project Splinter time machine so we can splinter out to a new time/location and battle the Army of the 12 Monkeys to prevent the plague.

 

I'll work on that for version 3.0. Still researching time travel algorithms. Kinda sick of cleaning up after these monkeys though. Sheesh.