noobneedshelp

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:)

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.

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.

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