Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
gammagrace

looping banner + TweenLite vs TweenMax

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!

gg

Link to comment
Share on other sites

Hi,

 

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.

 

Grace

 

 

 

 

Link to comment
Share on other sites

Sure,

 

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:
https://greensock.com/docs/TimelineMax

 

 

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