Jump to content
Search Community

TweenMax Repeat...

julien94270 test
Moderator Tag

Go to solution Solved by julien94270,

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

Hi here !

I have a new question about GreenSock... :
 

Let's say I have a very simple animation, for example a square moving from left to right...

For this case, I use TweenLite.to()

I want to replay this animation each time the user resizes the browser...
What is the best option for me, to get this result ?

Do I have to look around Javascript stuffs ?

Or can I simply use the "Repeat" option, included in TweenMax, to play again my tween ? 

Thanks for your help !

 

 

Link to comment
Share on other sites

the repeat special property controls how many times animation will play when you restart it.

 

To restart a tween

 

1: create a reference to it

var tween = TweenLite.to("#square", 1, {x:500);

2: any time you want to play it again

tween.restart();

If you need more help with something more specific to resizing the browser window, please create a CodePen demo with the minimal amount of code necessary to illustrate the issue.

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Thanks!

  • Like 3
Link to comment
Share on other sites

the repeat special property controls how many times animation will play when you restart it.

 

To restart a tween

 

1: create a reference to it

var tween = TweenLite.to("#square", 1, {x:500);

2: any time you want to play it again

tween.restart();

If you need more help with something more specific to resizing the browser window, please create a CodePen demo with the minimal amount of code necessary to illustrate the issue.

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Thanks!

 

 

Thanks a lot for your advice.

Here is my codePen:

See the Pen KdoGoq by anon (@anon) on CodePen

 

The purple square moves from left to right.

With "onresize", the tween of my purple square is triggered each time I resize my browser.

But when I am resizing the browser, the square is shaking too (sure, I ask to have a tween with onResize ^^ ), 

However, I would like to have this tween move, only when I have finished to resize the brower (not when I am resizing it).

I try to use "delay" inside my tween, to wait for it , but not sure it's the good thing to do :-)

 

One more time, thank you !

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