Repeat after click

[benmandv]

Hi there

 

Quite new to GSAP, basically I'm trying to repeat a part of my timeline after a click event. 

 

My code: 

$(".face4").on('click', function(e){
 TweenLite.to($(this), 1, {opacity: 0});
  tl.from(".box1", 2, {autoAlpha: 0})
  tl.to($(".box1"), 1, {opacity: 0});
  tl.from(".picture2", 2, {autoAlpha: 0})
  tl.to($(".picture2"), 1, {opacity: 0});
  tl.from(".picture3", 2, {autoAlpha: 0})
  tl.to($(".picture3"), 1, {opacity: 0});
  tl.from(".picture4", 2, {autoAlpha: 0})
  tl.to($(".picture4"), 1, {opacity: 0});
});

What I would like to happen is, once those events have finished I would like it to repeat the following infinitely : 

  tl.from(".box1", 2, {autoAlpha: 0})
  tl.to($(".box1"), 1, {opacity: 0});
  tl.from(".picture2", 2, {autoAlpha: 0})
  tl.to($(".picture2"), 1, {opacity: 0});
  tl.from(".picture3", 2, {autoAlpha: 0})
  tl.to($(".picture3"), 1, {opacity: 0});
  tl.from(".picture4", 2, {autoAlpha: 0})
  tl.to($(".picture4"), 1, {opacity: 0});

I've tried several approaches using the onComplete command but no joy. Any help would be appreciated. 

 

Many thanks

 

[PointC]

Hi benmandv 

 

Welcome to the forums.

 

If I understood your desired outcome, you could do something like this:

$(".face4").on('click', function(e){
TweenLite.to($(this), 1, {opacity: 0, onComplete:function(){tl.play()}});
});

tl = new TimelineMax({repeat:-1,paused:true});
tl.from(".box1", 2, {autoAlpha: 0})
tl.to($(".box1"), 1, {opacity: 0})
tl.from(".picture2", 2, {autoAlpha: 0})
tl.to($(".picture2"), 1, {opacity: 0})
tl.from(".picture3", 2, {autoAlpha: 0})
tl.to($(".picture3"), 1, {opacity: 0})
tl.from(".picture4", 2, {autoAlpha: 0})
tl.to($(".picture4"), 1, {opacity: 0});

You could also put the timeline into a function and call that function onComplete, but in this case I think setting it up this way will be better so all the .from() tweens will fire immediately and hide those picture elements for you.

 

Hopefully that helps a bit.

 

Happy tweening and welcome aboard.