[why does TimelineMax.add *immediately* change my opacity?]

Thank you for the education!  That is very helpful and I totally get it now.

[why does TimelineMax.add *immediately* change my opacity?]

I created a codepen here : 

See the Pen ?editors=011 by keldon (@keldon) on CodePen

 

My 'player' has a property 'timeline' which is a TimelineMax.

 

It is created paused and I have the player.timeline.play commented out on line 72.

 

My question is : why does the the '.add' call on line 142 immediately execute?

I would think it wouldn't execute until the parent timeline reaches the frameLabel 'frameDragon1'.

 

Thanks for any help,

Keldon

[dispose of a TimelineMax]

I am wanting to be sure that I am going about cleaning up a TimelineMax completely.

Can you please review and let me know if this code leaves anything straggling or is otherwise in need of improvement?

 

this.timeline.clear( true );
this.timeline.eventCallback( 'onComplete', null );          // : Function
this.timeline.onCompleteParams.length = 0;                  // : Array
this.timeline.onCompleteScope = null;                       // : Object
this.timeline.eventCallback( 'onRepeat', null );            // : Function
this.timeline.onRepeatParams.length = 0;                    // : Array
this.timeline.onRepeatScope = null;                         // : Object
this.timeline.eventCallback( 'onReverseComplete', null );   // : Function
this.timeline.onReverseCompleteParams.length = 0;           // : Array
this.timeline.onReverseCompleteScope = null;                // : Object
this.timeline.eventCallback( 'onStart', null );             // : Function
this.timeline.onStartParams.length = 0;                     // : Array
this.timeline.onStartScope = null;                          // : Object
this.timeline.eventCallback( 'onUpdate', null );            // : Function
this.timeline.onUpdateParams.length = 0;                    // : Array
this.timeline.onUpdateScope = null;                         // : Object
this.timeline.tweens.length = 0;                            // : Array
this.timeline = null;

Thank you for any guidance you can give me.

 

[animating a div <img> vs background-image]

I am just getting started with GSAP for JS and I am wondering which is more cross-browser friendly and/or performant :

1. a DIV element containing an IMG element
2. a DIV with it's style object's background-image set (via CSS or JS)

I am going to be scaling and rotating and it needs to work in the oldest IE that GSAP supports.  (as well as all the current and better browsers)

 

Thanks for pointing me in the right direction,

Keldon