[Symmetrical vertical motion]

t

4 hours ago, OSUblake said:

It looks like you're trying to animate something like buoyancy. I'll just throw this out there if you want to see an accurate simulation. There's no GSAP involved, but it might give you some ideas about the behavior.

 

This is beautiful! 

[Symmetrical vertical motion]

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

See the Pen MBLEdo by JacquieS (@JacquieS) on CodePen

 

 

[Dynamic time line - beginner question]

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

[Symmetrical vertical motion]

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

 

 

[Dynamic time line - beginner question]

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

18 hours ago, PointC said:

In your if/else statement you are adding the tween back to y:0. With rapid clicks/presses that will add multiple duplicate child tweens to that timeline. In this case it won't matter since the first one added will trigger the onComplete function and clear() the timeline, but you could add some logic to prevent those duplicate tweens from being added if you like.

 

Hopefully this info helps. Happy tweening.

 

[Dynamic time line - beginner question]

Wonderful!

So it's taken me a little while, but I've managed to get an example:

See the Pen wxRGRz?editors=1111 by JacquieS (@JacquieS) on CodePen

 

Is this the right way to do it? (It looks like what I want).  Especially, is using tl.kill() a good idea?

[Dynamic time line - beginner question]

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