Jump to content
Search Community

Tween duration and TimelineMax side-effect

VJ90102 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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 + '"');					

  TweenMax.to("#Car_parts > .part_image2",  0, {opacity:1, ease:Linear.easeNone});	

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. 

Link to comment
Share on other sites



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:

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



  • Like 2
Link to comment
Share on other sites

I see 3 problems at play here:


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

'-=' + t_duration + '"'
'-=' + 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. 


  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...