Delete Animation

[DennisOffinga]

I am making a Banner and I need the animation code  to be removed after whole animation has ran.

Im talking about the class ".logo", after the animation is done it does loop but i need the first line with the class ".logo" to be gone.

 

var tl = new TimelineMax();

  tl.repeat(-1).repeatDelay(1);

  

 

  tl.from('.logo', 0.6, {scale:0.0, force3D:true, ease: Back.easeOut.config(1.4)});  // <---- THIS ONE //
  tl.from('#intro-wrapper', 0.5,{y:'-5px', opacity:0},'+=0.9');
  tl.to('#intro-wrapper', 0.5, {opacity:0},'+=1.9');
  tl.to('.sunburst', 0.6, {opacity:0});
  tl.to('.logo', 0.4, {scale:0.5, force3D:true,y:'-40px'}, '-=0.3'); 


  tl.from('.freddie-zwaai', 0.5, {y:'140px', ease: Back.easeOut.config(1)});
  tl.from('#tekst-wrapper-1', 0.3, {opacity:0, ease: Power2.easeOut});
  tl.to('.freddie-zwaai', 0.01, {opacity:0}, '+=1');
  tl.from('.freddie-staan', 0.01, {opacity:0});


  tl.staggerFrom('.p', 0.5, {opacity:0, delay:1, ease:Power2.easeOut, force3D:true}, 1);
  tl.to('.freddie-staan', 0.01, {opacity:0}, '-=2');
  tl.from('.freddie-wijs', 0.01, {opacity:0},'-=2');


  tl.from('.cta', 0.5, {y:'50px',ease:Back.easeOut.config(1)}, '+=0.7');
  tl.to('.cta', 0.1, {scale:1.05, repeat:3, yoyo:true},'+=2');




   // -- EXTRA -- //


  tl.to('.freddie-wijs, #tekst-wrapper-1 , .p', 0.3, {opacity:0}, '+=1.2');
  tl.to('.sunburst', 0.3, {opacity:1},'-=0.2');
  tl.to('.logo', 0.4, {scale:0.8, force3D:true,y:'0px'});
  tl.to('.cta', 0.6, {x:'-35px', ease:Back.easeInOut.config(1)},'-=0.7');
  tl.to('.cta', 0.5, {y:'50px',ease:Back.easeIn.config(1)}, '+=2');

Thanks in advance !

[PointC]

Hi DennisOffinga 

 

Welcome to the GreenSock forum.

 

If I understand your question correctly, I think you're looking for the kill() method. 

 

From the docs

• Kills the animation entirely or in part depending on the parameters. Simply calling kill() (omitting the parameters) will immediately stop the animation and release it for garbage collection. To kill only particular tweening properties of the animation, use the first parameter which should be a generic object with enumerable properties corresponding to those that should be killed, like {x:true, y:true}. The second parameter allows you to define a target (or array of targets) to affect.

More information:

 

https://greensock.com/docs/#/HTML5/Animation/TweenMax/kill/

 

Hopefully that helps.

 

Happy tweening.