JacquieS

t This is beautiful!

I've found another solution; it uses set - it works, but the nesting of timelines looks a bit cumbersome:

thank you so much! now I understand. And now I see how to look at the timeline children etc., perfect!

Hi there, I'm trying to get an up-down-bobbing effect that is symmetrical around the starting location. I've made a code pen: the red square has the type of motion easing that I want and the yellow square has the symmetry that I want. (green square is just there for comparison of starting location) The reason that the code is a bit funny is because I want the square to be sensitive to user button presses (implemented for the red square), so that when the user presses a button, the motion stops smoothly, then goes down 2x on button presses before coming up again and resuming the bobbing [i've implemented that by having two separate time lines that affect the red square and pausing one when the other one is active; is this good?]. When the red square comes up again, it looks a bit funny - which is why i thought it would be better if the initial bobbing was coded as symmetrical around the starting location, rather than just down and then yoyo back. https://codepen.io/JacquieS/details/yqZyar/ Many thanks Jacquie

Thank you so much, this is really helpful! Also, love GSAP and the forum!! - I'd spent a day getting the animations just right with CSS animations only and it just didn't work; and it's so easy with GSAP. [I'm using this for a research study; experimental psychology] I have one more question; I don't quite understand what you're saying here about the problem with the if/else statements and rapid button presses. Do you mean that I could be adding too many tweens somehow if the person presses the button before an animation has finished? (It looks like it's running ok - what is the best way to see what I have in my timeline after a few button presses? I've tried 'tl' in the console, but there is a lot of information, i can't quite figure out where the timeline elements are?)

Wonderful! So it's taken me a little while, but I've managed to get an example: Is this the right way to do it? (It looks like what I want). Especially, is using tl.kill() a good idea?

Dear GSAP experts, I have not used GSAP before. I was wondering whether you could advice me whether GSAP would be able to do a time line as follows (no need to tell me how to do it, I can read the manual to learn more - I just wanted to quickly get an opinion about whether it is at all possible before starting to go through tutorials): I want to have a square on the screen that moves to the right (by e.g. 10 vh) every time a user presses a button. I have tried with CSS animations, but the tricky thing is that I want the animation to take 0.5s. So e.g. if a user presses the button three times in quick succession, I want a timeline that grows to accommodate three animations that then play one after the other (translating 30vh in total). And if the user presses a key a fourth time while the animation is already running (e.g. while it is in the process of doing the 2nd movement), I want to append this to the timeline while it is running (so that the square moves 40 vh in total). Would this be possible with GSAP? Many thanks Jacquie