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

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