Jump to content
GreenSock

quintonjason

Automate initial velocity Draggable

Go to solution Solved by OSUblake,

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

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

Link to comment
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

  • 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.
×