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:
http://codepen.io/anon/pen/HuCxk
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.