Jump to content


looping banner + TweenLite vs TweenMax

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

Hello, I am new to using GSAP, so apologize for these basic questions.


I am creating a banner and need to loop it x# of times.

Can I do this with TweenLite, or do I need to use TweenMax? Could you recommend an example which loops for me to see the script in action?


And... based on this sample of the (unfinished) script, could I use TweenLite?

I don't think I have anything very robust here, so would prefer to use Lite to save on file size.


TweenMax.from('#hed1', .5, {delay:.2, alpha:0, y:'-=20'})
TweenMax.from('#orange_boat',2, {delay:3.75, top:'+=150', left:'-=350', ease:'Quad.easeOut'})
TweenMax.from('#whiteboat_one',2, {delay:0, top:'+=0', left:'-=0', ease:'Quad.easeOut'})
TweenMax.from('#whiteboat_two',2, {delay:0, top:'+=0', left:'+=0', ease:'Quad.easeOut'})
TweenMax.to('#hed1', .3, {delay:4, alpha:0, y:'-=75'})
TweenMax.to('#orange_boat',2, {delay:6, top:'+=128', left:'+=38', width:'140px', ease:'Quad.easeOut'})
TweenMax.to('#whiteboat_one',2, {delay:6, top:'+=0', left:'-=0', width:'99px', ease:'Quad.easeOut'})
TweenMax.to('#whiteboat_two',2, {delay:6, top:'+=30', left:'+=30', width:'80px', ease:'Quad.easeOut'})
TweenMax.from('#hed2', 1.5, {delay:7, alpha:0, top:'+=0', ease:'Back.easeOut'})
TweenMax.from('#cta', 1, {delay:4,alpha:0})
TweenMax.from('#cta>em', .5 , {delay:4.5, alpha:0});
TweenMax.to('#cta',.5, {delay:5,'backgroundColor':'rgba(200,255,255,1)', repeat:3, yoyo:true});


Thanks for any help on this!


Link to comment
Share on other sites



Best if You make a Timeline and chain the tweens in it like this:


var tl = new TimelineMax( { repeat: -1 } );

tl.from('#hed1', .5, {delay:.2, alpha:0, y:'-=20'})
.from('#orange_boat',2, {delay:3.75, top:'+=150', left:'-=350', ease:'Quad.easeOut'})
.from('#whiteboat_one',2, {delay:0, top:'+=0', left:'-=0', ease:'Quad.easeOut'})
.from('#whiteboat_two',2, {delay:0, top:'+=0', left:'+=0', ease:'Quad.easeOut'})
.to('#hed1', .3, {delay:4, alpha:0, y:'-=75'})
.to('#orange_boat',2, {delay:6, top:'+=128', left:'+=38', width:'140px', ease:'Quad.easeOut'})
.to('#whiteboat_one',2, {delay:6, top:'+=0', left:'-=0', width:'99px', ease:'Quad.easeOut'})
.to('#whiteboat_two',2, {delay:6, top:'+=30', left:'+=30', width:'80px', ease:'Quad.easeOut'})
.from('#hed2', 1.5, {delay:7, alpha:0, top:'+=0', ease:'Back.easeOut'})
.from('#cta', 1, {delay:4,alpha:0})
.from('#cta>em', .5 , {delay:4.5, alpha:0});
.to('#cta',.5, {delay:5,'backgroundColor':'rgba(200,255,255,1)', repeat:3, yoyo:true});


The -1 value of the repeat: key means infininte loop.


If You worry about the file size just link GSAP from CDN:


<script src = 'https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.19.1_92cf05aba6ca4ea5cbc62b5a7cb924e3_min.js' ></script>



  • Like 2
Link to comment
Share on other sites

Hi Oliver!


Thanks so much for your quick reply. I am working on trying the code you posted above. When I get it working I will post here via codepen page.


Also, I came across this example, which includes something else I need in my banner.

Basically I need the banner to repeat 3 times, and when it finishes the 3 loops, I need it to end displaying the 4th of 5 frames. I hope that makes sense.

This example kind of does that:

See the Pen WQaMez by MAW (@MAW) on CodePen

But I wasn't able to change the number of loops. This one does what I need but only loops 2x. If it's not a bother could you help me to understand what the trick is to get this to loop 3 times and end on the second to last frame?


Again thank you so much for any help. I am really loving animating this way, but am still at well within the learning curve process.







Link to comment
Share on other sites



As You can see we are able to add function calls to the timeline at any point in time.


.add( function() { if ( !loop ) { tl.stop() } } )


With this You can count the loops or stop the timeline at any point if the number of the loop is the desired.


Check out the docs for more timeline control methods:



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