Jump to content
Search Community

Looping with Timelinemax then resuming sequence of tweens

sorciereus 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

What's a better way to make a sequence like this shown here, but utilizing timelinemax?

	 TweenMax.to("lens_flare1", .25, {alpha:1, scaleX:1.2, scaleY:1.2, repeat:3, repeatDelay:1, delay:1});
	 TweenMax.to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1,  repeat:3, repeatDelay:1.25, delay:1.25});
	 TweenMax.to("lens_flare2", .25, {alpha:1, scaleX:1.3, scaleY:1.3,  repeat:3, repeatDelay:1.1, delay:1.1});
	 TweenMax.to("lens_flare2", .25, {alpha:0, scaleX:1, scaleY:1,  repeat:3, repeatDelay:1.35, delay:1.35});
	 TweenMax.to("lens_flare3", .25, {alpha:1, scaleX:1.2, scaleY:1.2,  repeat:3, repeatDelay:1, delay:1});
	 TweenMax.to("lens_flare3", .25, {alpha:0, scaleX:1, scaleY:1,  repeat:3, repeatDelay:1.25, delay:1.25});
	 TweenMax.to("lens_flare4", .25, {alpha:1, scaleX:1.4, scaleY:1.4,  repeat:3, repeatDelay:1.2, delay:1.2});
	 TweenMax.to("lens_flare4", .25, {alpha:0, scaleX:1, scaleY:1, repeat:3, repeatDelay:1.37, delay:1.37}); 

After this series completes further animation will resume'. 

Link to comment
Share on other sites

Please always make the greatest effort to set up some type of live sample in codepen:
You have 4 elements with some properties going back and forth and with different delays. The best choice would be to create a timeline for each element and nest those 4 timelines into a parent one. Then you can add a onComplete callback in the parent timeline to resume the following animations or you can attach a call instance to the parent timeline or you can add the following animations to the parent timeline, lots of options in that front. You'll have to decide which one fits better in your scenario.
AS for the sequences, it could be like this:

var masterTl = new TimelineLite({onComplete:completeCallback}),
    tl1 = new TimelineMax({repeat:3, repeatDely:0.75, delay:1}),
    tl2 = new TimelineMax({repeat:3, repeatDely:0.85, delay:1.1}),
    tl3 = new TimelineMax({repeat:3, repeatDely:0.75, delay:1}),
    tl1 = new TimelineMax({repeat:3, repeatDely:0.95, delay:1.2});

  .to("lens_flare1", 0.25, {alpha:1, scale:1.2})
  .to("lens_flare1", 0.25, {alpha:0, scale:1});

  .to("lens_flare2", .25, {alpha:1, scale:1.3})
  .to("lens_flare2", .25, {alpha:0, scale:1});

  .to("lens_flare3", .25, {alpha:1, scale:1.2})
  .to("lens_flare3", .25, {alpha:0, scale:1});

.to("lens_flare4", .25, {alpha:1, scale:1.4})
.to("lens_flare4", .25, {alpha:0, scale:1});

// then add the timelines to the parent one
// in this case all timelines start at the same time but keep their different delays
masterTl.add([tl1, tl2, tl3, tl4]);

function completeCallback()
  // your code here

I don't know if this is what you're after, but without a live sample is a bit more tricky to know exactly what's the general idea of your code.



  • Like 2
Link to comment
Share on other sites

Like Rodrigo said, its much better to work with code that we can actually test and edit.


If you want your code to run exactly as it is now, just inside a timeline, you can use TimelineMax.add() to add an array of tweens



var tl = new TimelineMax({onComplete:someFunction})


TweenMax.to("lens_flare1", .25, {alpha:1, scaleX:1.2, scaleY:1.2, repeat:3, repeatDelay:1, delay:1}),
TweenMax.to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1,  repeat:3, repeatDelay:1.25, delay:1.25}),
TweenMax.to("lens_flare2", .25, {alpha:1, scaleX:1.3, scaleY:1.3,  repeat:3, repeatDelay:1.1, delay:1.1}),
TweenMax.to("lens_flare2", .25, {alpha:0, scaleX:1, scaleY:1,  repeat:3, repeatDelay:1.35, delay:1.35}),
TweenMax.to("lens_flare3", .25, {alpha:1, scaleX:1.2, scaleY:1.2,  repeat:3, repeatDelay:1, delay:1}),
TweenMax.to("lens_flare3", .25, {alpha:0, scaleX:1, scaleY:1,  repeat:3, repeatDelay:1.25, delay:1.25}),
TweenMax.to("lens_flare4", .25, {alpha:1, scaleX:1.4, scaleY:1.4,  repeat:3, repeatDelay:1.2, delay:1.2}),
TweenMax.to("lens_flare4", .25, {alpha:0, scaleX:1, scaleY:1, repeat:3, repeatDelay:1.37, delay:1.37}),


all of these tweens will be added to the timeline at the same time, but their existing delays will dictate when they start.


There is another approach where you could add() each tween and use the position parameter instead of delay. Kind of like:

tl.add(TweenMax.to("lens_flare1", .25, {alpha:1, scaleX:1.2, scaleY:1.2, repeat:3, repeatDelay:1}), 1);
tl.addTweenMax.to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1,  repeat:3, repeatDelay:1.25}), 1.25);
tl.addTweenMax.to("lens_flare2", .25, {alpha:1, scaleX:1.3, scaleY:1.3,  repeat:3, repeatDelay:1.1}), 1.1);
tl.addTweenMax.to("lens_flare2", .25, {alpha:0, scaleX:1, scaleY:1,  repeat:3, repeatDelay:1.35}), 1.35);


  • Like 2
Link to comment
Share on other sites

Thanks for the reply. I'll start using code pen to show you working code 


- thanks for the answers here I'll look them over - interesting this thread didn't show in my account so I started a similar one with my progress - apologies for the duplicate. 

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...