Jump to content
Search Community

Translate elements at the same speed

ZizhengTai 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

I want to create an animation where multiple elements can slide across their container at the same speed. It's awkward to use the duration for this purpose, because the elements can be of different lengths, so with the same duration longer elements will move faster.

 

Is there any way to fix them at the same speed?

Link to comment
Share on other sites

It's just a matter of determining what needs to get where and assigning that property a calculated value. All said and done, the duration will dictate the "speed" at which the element moves.

 

See the Pen grLqYB by sgorneau (@sgorneau) on CodePen

 

[Edit] Having reread your question, I believe I just answered what you already knew :)

 

If I understand correctly, you want items of varying length to move at the same velocity regardless of the distance needed to travel?

Link to comment
Share on other sites

There is no "speed" or "velocity" parameter (that I know of) because the values that calculate velocity are present (time and distance) ... if velocity were also a property I think it might rip a hole in the space-time continuum.

 

Having said that, I'd say this is a rather direct way to determine speed.

  • Like 2
Link to comment
Share on other sites

Hi ZizhengTai  :)

 

Welcome to the forums.

 

I'm not 100% sure what your needs are, but you can have a look at the Velocity Tracker.

http://greensock.com/docs/#/HTML5/GSAP/Utils/VelocityTracker/

 

It's part of the ThrowPropsPlugin Javascript file which is a Club Member plugin, but you can certainly read more about it and see if it's what you might need.

 

Hopefully that gives you a few ideas.

 

Happy tweening and welcome aboard.

:)

Link to comment
Share on other sites

If your goal is to apply a certain velocity to various elements, yeah, you can totally do that with PhysicsPropsPlugin or Physics2DPlugin. Here's a super simple example: 

http://codepen.io/anon/pen/jqVdQM

 

PhysicsPropsPlugin lets you do it to ANY property. Obviously the most common would be "x" and "y", but you can do whatever you want. 

 

Physics2DPlugin is kinda like a specialized version of PhysicPropsPlugin in that it just does x and y (or top/left) and allows you to define an angle (affects both x and y) as well as gravity. 

 

Does that help at all?

 

Oh, and the physics plugins are membership benefits of Club GreenSock (http://greensock.com/club/) so they're not in the public downloads. 

  • Like 4
Link to comment
Share on other sites

Thanks everyone! And to Shaun, the reason I'm holding back from calculating velocity explicitly is that there are a lot of elements in different places with different parents, and it's messy to handle each of them. It's an option though, if it turns out we can find a way to centralize the logic. And Jack, I'll certainly look into the plugin, they look really promising!

  • Like 1
Link to comment
Share on other sites

If your goal is to apply a certain velocity to various elements, yeah, you can totally do that with PhysicsPropsPlugin or Physics2DPlugin. Here's a super simple example: 

See the Pen jqVdQM by anon (@anon) on CodePen

 

PhysicsPropsPlugin lets you do it to ANY property. Obviously the most common would be "x" and "y", but you can do whatever you want. 

 

Physics2DPlugin is kinda like a specialized version of PhysicPropsPlugin in that it just does x and y (or top/left) and allows you to define an angle (affects both x and y) as well as gravity. 

 

Does that help at all?

 

Oh, and the physics plugins are membership benefits of Club GreenSock (http://greensock.com/club/) so they're not in the public downloads.

Hi Jack, I'm trying to make an element translate from one point (given by the `left` property) to another, at a certain speed. So basically I want to do a `TweenLite.from` with certain starting/ending points and velocity, which means I shouldn't specify the duration. Is there a way to not set the duration?

 

Currently I'm doing this by explicitly calculating the best approximate duration (so their velocity will be exactly the same, but the ending points are a little bit off).

 

UPDATE: We found a way to calculate the exact duration without too much trouble. It would still be nice to not have to do it manually though!

Link to comment
Share on other sites

It depends on the effect you're going for - do you want a linear ease or an ease out? 

 

If you want a linear ease, it should be pretty simple to do the math to figure it out, and just use a function or something to make your code super simple. 

function slide(element, start, end, velocity) {
    return TweenLite.to(element, Math.abs(end - start) / velocity, {x:end, ease:Linear.easeNone});
}
slide(element1, 0, 100, 50);
slide(element2, 25, 175, 50); //...and so on. 

If, however, you want an ease out, you can use ThrowPropsPlugin.to(), like:

ThrowPropsPlugin.to(element, {x:{velocity:50, end:100}, ease:Strong.easeOut});

There are a bunch of fun special properties you can plug into the throwProps tween that'll affect things, like a minimum duration, maximum duration, overshootTolerance, etc. See the docs at http://greensock.com/docs/#/HTML5/GSAP/Plugins/ThrowPropsPlugin/to/. You can even track the moment-by-moment velocity of any property and have it smoothly pick up right from there. The plugin will make things glide naturally to a stop, even allowing some overshooting if the initial velocity is strong enough and the distance traveled is short. Heck, you can even set snapping points instead of an end position and it'll figure out the closest one to the natural stopping point and make it go there smoothly. 

 

Have fun!

  • Like 4
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...