Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Maintain velocity on re-positioned objects with ThrowProps

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

What I'm going for:

When an element reaches the edge of it's boundary box,

it re-positions itself at the other edge of it's boundary box.

If thrown, it will maintain velocity.


I'm using .set and it's removing velocity.

I saw on another thread that there's a way to access velocity but I'm not sure how to keep it when re-positioning the element, or even if I'm thinking about it in the most performant way.




See the Pen zZgmYa by philipbell (@philipbell) on CodePen

Link to comment
Share on other sites

  • Solution

Here are some nice functions you can use with the ModifiersPlugin...



One thing to keep in mind about the ThrowPropsPlugin is that it's not tied to Draggable. So here's a quick fork showing how you can create a throw tween with some modifiers. I think calculating the end position using that formula will eliminate the jump at the end.

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


And if you're still looking into using Pixi, here's how to get the ThrowPropsPlugin working with it. Pretty similar to what I did in the demo above.

See the Pen 524a3acb87900129a205f2fa1143bc5d?editors=0010 by osublake (@osublake) on CodePen



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