noobneedshelp

Reverse multiple tweens once one after the other

Recommended Posts

Hello everyone,

 

I hope the GSAP pros here can help me at my rather simple problem thats driving my nuts since 3 hours (!).

 

I have elements on a page that have to change color and scale. After this I want to reverse the animation.

I need to do this for about 4 different Elements. So each element should animate like this: 1-2-3-3-2-1 and start once the other is finished with a slight delay maybe.

I already tried with repeat: 1 and yoyo: true but then it repeats the animation like this: 1-2-3-3-2-1-1-2-3-3-2-1 which I don't want …

 

At first I tried it in a timeline but am not sure if this is the appropriate thing to do for my kind of animation.

 

var introTimeline = new TimelineMax();

introTimeline.append(  TweenMax.to($(".Ele1"), 1.5, {scale: 2, fill: "rgba(255,255,255,1)", ease: Power2.easeIn, repeat: 1, yoyo: true})  );

introTimeline.append(  TweenMax.to($(".Ele2"), 1.5, {scale: 2, fill: "cyan", ease: Power2.easeIn, repeat: 1, yoyo: true})  );

 

 

Can someone here help me?

I would really really appreciate it!

GSAP looks awesome but I'm quite confused right now …

 

Share this post


Link to post
Share on other sites

I'm not quite sure I understand the effect you're after, but if you're wanting to stagger the animations, you could do this: 

var introTimeline = new TimelineMax();
introTimeline.staggerTo(".Ele1", 1.5, {scale: 2, fill: "rgba(255,255,255,1)", ease: Power2.easeIn}, 0.2  );
introTimeline.staggerTo(".Ele2", 1.5, {scale:1, fill: "cyan", ease: Power2.easeIn}, -0.2 );

 

Notice the "0.2" at the end of the first line and "-0.2" at the end of the second - those are the stagger amounts. Use whatever values you want. A negative value reverses the order of the array. Again, I suspect that I don't understand the effect you want, but hopefully this nudges you in the right direction. 

  • Like 2

Share this post


Link to post
Share on other sites

Hi Jack,

 

first of big thanks for your answer!

 

The thing is that the classes ".Ele1" and ".Ele2" are assigned to about 600 elements.

As I understand it stagger cycles through all the 600 elements and then animates them?

I'm looking for a way to instantly animate all those 600 elements that have the class e.g. ".Ele1" assigned and then reverse that animation.

Share this post


Link to post
Share on other sites

Okay, if you don't want it staggered, you can just use a regular to() call: 

 

var introTimeline = new TimelineMax();
introTimeline.to(".Ele1", 1.5, {scale: 2, fill: "white", ease: Power2.easeIn} );
introTimeline.to(".Ele2", 1.5, {scale:1, fill: "cyan", ease: Power2.easeIn} );

 

Again, I may be misunderstanding the effect you're after. It'd help if you elaborated a bit about exactly what you want. 

 

If you want it to just animate to scale:2, fill:"white" and then go back to what it was originally, it'd be as easy as:

 

var introTimeline = new TimelineMax();
introTimeline.to(".Ele1", 1.5, {scale: 2, fill: "white", ease: Power2.easeIn, repeat:1, yoyo:true} );

 

Have you watched the "getting started" video yet? http://greensock.com/get-started-js/
 

 

  • Like 1

Share this post


Link to post
Share on other sites

 

Hi noobneedshelp,

 

It is difficult to guess what you have in mind.
 
In this pen CARL´s  recommendation is realized using the example of svg boxes:

 

 

 

It would be great if you can comment or modify this pen regarding the animation you are expecting.

Share this post


Link to post
Share on other sites

What I wrote at first was: 

 

function animation() {
	TweenMax.to($(".Ele1"), 1, {scale: 2, fill: "rgba(255,255,255,1)", ease: Power2.easeIn, repeat: 1, yoyo: true});

	TweenMax.to($(".Ele2"), 1, {scale: 2, fill: "red", ease: Power2.easeIn, repeat: 1, yoyo: true, delay: 2});
  
  	TweenMax.to($(".Ele3"), 1, {scale: 2, fill: "blue", ease: Power2.easeIn, repeat: 1, yoyo: true, delay: 3});
}

$("*").on("click", animation);

 

 

As you can see I delay each tween so that it basically seems like a timeline. I thought there must be a more elegant and simple way to achieve this.

Thats why I thought hey I should write it in a timeline. I now wrote it using mikels example like so:

 

var introTimeline = new TimelineMax();

function animation() {
    introTimeline.to($(".Ele1"), 1, {scale: 2, fill: "rgba(255,255,255,1)", ease: Power2.easeIn, repeat: 1, yoyo: true});

    introTimeline.to($(".Ele2"), 1, {scale: 2, fill: "red", ease: Power2.easeIn, repeat: 1, yoyo: true, delay: 1});
  
	introTimeline.to($(".Ele3"), 1, {scale: 2, fill: "blue", ease: Power2.easeIn, repeat: 1, yoyo: true, delay: 2});
}

$("*").on("click", animation);

 

But when I do it like that the timeline repeats each of the elements 3 times … I don't understand that and don't want that to happen. Each element should just repeat once. After the animation of the first element is done the next element animates, and so on. 

 

What I actually want is what the first code snippet does but am not sure if that is the right/most simple way to write it?

Do I really need 3 tweens that I delay one after the other? There is no shortcut method to this?

 

Thanks for your help guys! 

Share this post


Link to post
Share on other sites

Hi noobneedshelp,

 

I´m still a little bit confused.

Is this what you expect:

 

 

  • Like 1

Share this post


Link to post
Share on other sites

Hi mikel,

 

your final example is what I needed, yes.

Thanks a lot! I finally found my mistake …(I guess my nickname fits me well^^)

As you can see in my previous code snippet I assigned the timeline to a var outside the function that gets fired when something gets clicked. That caused the timeline to repeat and yoyo endlessly. 

 

The greensock community seems to be as cool as GSAP! Thank you guys, you helped me out a lot:)

  • Like 2

Share this post


Link to post
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.