Search the Community
Showing results for tags 'acceleration'.
Found 3 results
-
Sometimes it's useful to tween a value at a particular velocity and/or acceleration without a specific end value in mind. PhysicsPropsPlugin allows you to tween any numeric property of any object based on these concepts. Keep in mind that any easing equation you define for your tween will be completely ignored for these properties. Instead, the physics parameters will determine the movement/easing. These parameters, by the way, are not intended to be dynamically updateable, but one unique convenience is that everything is reverseable. So if you create several physics-based tweens, for example, and throw them into a timeline, you could simply call reverse() on the timeline to watch the objects retrace their steps right back to the beginning. Here are the parameters you can define (note that friction and acceleration are both completely optional): velocity : Number - The initial velocity of the object measured in units per second (or for tweens where useFrames is true, it would be measured per frame). (Default: 0) acceleration : Number - The amount of acceleration applied to the object, measured in units per second (or for tweens where useFrames is true, it would be measured per frame). (Default: 0) friction : Number - A value between 0 and 1 where 0 is no friction, 0.08 is a small amount of friction, and 1 will completely prevent any movement. This is not meant to be precise or scientific in any way, but it serves as an easy way to apply a friction-like physics effect to your tween. Generally it is best to experiment with this number a bit, starting at a very low value like 0.02. Also note that friction requires more processing than physics tweens without any friction. (Default: 0) gsap.to(elem, { duration: 2, physicsProps: { x: {velocity: 100, acceleration: 200}, y: {velocity: -200, friction: 0.1} } }); Demos PhysicsProps Demos To learn how to include the PhysicsPropsPlugin into your project, see the GSAP install docs. -
Hi, I have a small issue with my scroller withing my mobile app. The issue is if I'm pressing, holding and dragging (up or down to wanted position) in one action, and then lifting my finger - the scroll will continue the animation of scrolling. It's like it "stores acceleration" - If my drag action is bigger, than the scroll will continue the animation more. How can I disable this "after scroll" animation? I just want a smooth and linear scroll. Can someone help? Here is my current code: ThrowPropsPlugin.to(buttons_container_mc, {throwProps:{ y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:100} }, onUpdate:blitMask.update, ease:Expo.easeOut }, 100, 0.25, 0); Best regards, Roman -
Hi, For the purpose of distilling this problem to its principal components, let's say I have 2 object that are side by side, say at y=100 pixels. I want both of those to fall down the screen, but to different destination y locations. I want them both to accelerate (easeIn), at the same speed, even though their distance to tween is different. Also I want to cap their final velocity, so they never fall faster than pixels/sec. Here is an illustration: (initial position) Sprite1 Sprite2 (fromX = 0, fromY = 0) (fromX = 100, fromY = 0) (toX = 0, toY = 200) (toX = 100, toY = 400) (falling --> Sprite 1 and Sprite 2 have the EXACT same Y location as falling, since they are using the same custom easing IN function to control their acceleration and final velocity) (falling) .. .. .. Sprite1 has stopped here) Sprite1 (x=0, y=200) Sprite2 (is at the exact same Y locations because they are following the same easing IN function, regardless of total distance to travel (Sprite2 continues to fall until it reaches it target location of y=400) Sprite2 (x = 100, y = 400) Thanks, --Kestal
