Tween duration and TimelineMax side-effect

[VJ90102 0 Likes (Newbie)]

The following snippet uses TimelineMax to show two alternating items: one fades in as the other fades out and then they reverse roles. The timeline is paused until a click event starts things off. In the click handler --  $(".dDot").click(function(){} -- the first item is made visible before playing the timeline. If the duration of the opacity change here is not zero, playing the timeline will fade that item out and never bring it back. Only the other item appears -- blinking all alone.  

var t_duration = 0.5;
var tl = new TimelineMax({repeat:-1, repeatDelay:3, yoyo:true, paused:true, delay:3});	
    tl.to("#Car_parts > .part_image", t_duration, {opacity:1, ease:Linear.easeNone})
      .to("#Car_parts > .part_image2",  t_duration, {opacity:0, ease:Linear.easeNone},'-=' + t_duration + '"');					

$(".dDot").click(function(){
  TweenMax.to("#Car_parts > .part_image2",  0, {opacity:1, ease:Linear.easeNone});	
  tl.play();	
});

You can see this in action here:

 

See the Pen HuCxk by anon (@anon) on CodePen

 

There is a  3 second delay on the timeline play().  I don't understand why the initialization of one of objects has such an impact on the timeline. 

[Rodrigo 2,662 Likes (Superhero)]

Hi,

 

The problem is that you first create your timeline, then you create a individual tween instance, since that instance's duration is 0 is completed immediately then the timeline takes over control of the red square. But when the instance created with the click event has any duration the timeline takes over the red square and tween it's current opacity to 0. That happens at 0.5 seconds which is when the click created instance has finished, at that point the red square's opacity is 0, therefore the timeline tweens the element's opacity from 0 to 0.

 

A way to solve this is to start the timeline once the click created instance is completed with an onComplete callback, like this:

$(".dDot").click(function()
{
    TweenMax.to("#Car_parts > .part_image2",  0.5, {opacity:1, ease:Linear.easeNone, onComplete:function()
    {
        tl.play();
    } });
});	

Best

Rodrigo.

[GreenSock 8,117 Likes (Superhero)]

I see 3 problems at play here:

 

First (and this is very minor), you've got a double-quote in your time parameter:

//BAD:
'-=' + t_duration + '"'
//GOOD: 
'-=' + t_duration

Second, I think you may have assumed that when you play() a timeline, it includes the delay. It doesn't. Usually when someone wants a timeline to play(), they mean right away - they don't want it to factor in the initial delay. So when you called play(), it was immediately starting the timeline rather than waiting 3 seconds, thus at that time opacity was 0. If you want to restart a timeline and factor in the delay, you can use the restart(true) method and make sure the "includeDelay" parameter is true. 

 

Third, there was a small tweak to be made in TimelineLite/Max that'll make it handle a situation like this even better, so this example actually helped me track down a very rare edge case and implement a workaround, so thank you! I have attached an updated preview of 1.11.0 in case you want to kick the tires. 

GSAP_1.11.0_rc13.zip