Question about TimelineMax paused properties

[daniel_pan]

Hi, I am pretty new to GreenSock, so i might ask a silly question.

 

Problem is I create a variable like:

 

var tl = new TimelineMax({paused:true, repeat: -1});

 

and i set the tl.from(element, 1, {opacity: 1});   element's original css opacity is 0

 

and i will play it in some onClick function.

 

Problem is my element original opacity is 0, and before I trigger Click event, the above code would already set my element opacity to 1. This is not what i want.

 

What I want is that the element's opacity is 0, when I play the TimelineMax, i would play a tween to make my element from opacity:1 to opacity: 0

 

 

Here is my codepen: 

 

Hope someone could give me a hint, thanks....

See the Pen wMyLMZ by DanielYKPan (@DanielYKPan) on CodePen

[Diaco]

Hi daniel_pan 

 

pls add immediateRender : false to your Tween Vars : 

See the Pen XXqMWg by MAW (@MAW) on CodePen

[Carl]

Diaco is exactly right. This video explains immediateRender: 

[daniel_pan]

Thanks Carl and Diaco

 

That's what I want....