# Automate initial velocity Draggable

Go to solution Solved by OSUblake,

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

Hello all,

I'm trying achieve the effects that the Draggable provides(mainly throwProps: true and bounds: window), but I'm not sure I'm going down the right direction or a rabbit hole.

I have some elements that will translating across the screen and will reverse direction upon hitting the bounds.

Draggable would be my go-to solution, but a user isn't initiating the velocity. I would like the set the initial velocity and set the dragResistance super low.

I also considered setting the initial velocity per the ThrowPropPlugins with the following:

`TweenLite.to(mc, 2, {throwProps:{x:500, y:-300}});`

Using this method I haven't been able to figure out how to keep the element within the min/max values. It seems like min/max for y is working, but now x.

Can someone let me know if I'm either making this more complicated than it has to be or assist me with getting the bounds worked out?

See the Pen c28000b77cf1f53afea295c2542cbabf by quintonjason (@quintonjason) on CodePen

##### Share on other sites

• Solution

You're on the right path. One thing you need to take into consideration when doing tweens like this is the time. Depending on what you are doing, that could be a big unknown. What I've done in the past is to just create a tween without an end value (bounds), and then on the update I check if it has a collision with the bounds.

Creating a bounce effect is real easy. Just multiply the current velocity by -1. If you want your object to lose velocity on a bounce, use a number closer to 0, like say -0.7.

See the Pen 5cbc8f44af70addcdd753398dd8e5dde?editors=0010 by osublake (@osublake) on CodePen

• 4
##### Share on other sites

Quinton wanted to know how to refactor this out for multiple rockets... so off they go, crazy things!

Let me know if something doesn't make sense.

See the Pen 335c2847fae5832a4130cc4fbcb559ec?editors=0010 by osublake (@osublake) on CodePen

##### Share on other sites

Thanks a bunch. It worked like a charm!