Jump to content
Search Community

Symmetrical vertical motion

JacquieS test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

 

 

Link to comment
Share on other sites

You might be able to use CustomWiggle for symmetric movement from center.

 

https://greensock.com/docs/Easing/CustomWiggle

 

Following is a demo I created where elements have their default animation but when you move mouse they start following the mouse. Instead of animating actual elements, I have some objects that I tween. The elements follow certain item based on some conditions and their speed is changed as their target changes. It uses Canvas but that shouldn't be issue, you can duplicate same logic for html elements. Though feel free to ask if you have questions about certain parts in the demo.

 

See the Pen OwxqLg by Sahil89 (@Sahil89) on CodePen

 

 

  • Like 4
Link to comment
Share on other sites

Why don't you just start the animation from the top instead of the center? 

 

These do the same thing.

var tl_bobbing = new TimelineMax({repeat:-1, onRepeat:checkShouldStop});
tl_bobbing.fromTo("#redSquare", 0.5, {
  y: toPX(-5)
}, {
  y: toPX(5),
  repeat: 1,
  yoyo: true,
  ease: Power1.easeInOut
})
.time(0.25); // start at y = 0

var tl_bobbing_yellow = new TimelineMax({repeat:-1});
tl_bobbing_yellow.to('#yellowSquare',0.25,{y:'+='+ toPX(5), ease:Power1.easeOut});
tl_bobbing_yellow.to('#yellowSquare',0.5,{y:'+='+ toPX(-10), ease:Power1.easeInOut});
tl_bobbing_yellow.to('#yellowSquare',0.25,{y:'+='+ toPX(+5), ease:Power1.easeIn});

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

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.

 

Click anywhere to move/throw the ball.

 

See the Pen ef4d1838849bf23c143bef348a1d9a62 by osublake (@osublake) on CodePen

 

 

 

  • Like 4
Link to comment
Share on other sites

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! 

  • Like 3
Link to comment
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.
×
×
  • Create New...