Leaderboard

Your parent element didn't have display and position property set. In most browsers you need to set them to make overflow hidden work. And renaming your tree class worked because it was setting position of tree to absolute.

Yep, @Sahil is exactly right - you probably only need ThrowPropsPlugin because it can track the velocity of any property of any object, and you can just do a regular throwProps tween whenever you want. You'd define an "end" value inside the throwProps object to do your custom snapping logic. ThrowPropsPlugin.track(object, "x"); //I'm not quite sure what you're tracking TweenMax.to(yourOtherObject, 1, { throwProps:{ x:{ velocity:ThrowPropsPlugin.getVelocity(object, "x"), end: function(endValue) { return Math.round(endValue / 80) * 80; } } } }); That assumes you want a particular duration (1 second in this case), but you can use ThrowPropsPlugin.to() if you want that duration to be automatically calculated based on the velocity. I doubt you even need Physics2DPlugin.

It is happening because how from tweens work. When you rebuild your timeline, you are setting timeline's progress to 0. At progress zero your element is at 100% so first tween goes from 100% to 100%. Easiest solution would be to use fromTo tweens.

No there is no setting to set maximum velocity. You can instead set max and min duration and resistance. Check throwProps under 'Config object properties' https://greensock.com/docs/Utilities/Draggable What you are doing might be done without Draggable, you can use ThrowPropsPlugin directly to track velocity. And use Physics2DPlugin. https://greensock.com/docs/Plugins/ThrowPropsPlugin https://greensock.com/docs/Plugins/Physics2DPlugin

I need to track velocity because I want to do a certain animation when velocity hits certain ranges, I just didn't include the code in my sample. I believe this might work as long the initial velocity is not a large number. I'll give it try. Thanks for the responses!

Thank you @Sahil, that makes sense now when I see the positions in the log!

I didn't have much time to look, but it seems like your "DOMContentLoaded" handler never even gets called, so none of the code in there executes (and that's obviously where all the animation code is).

Okay thank you!

SVG, Jpg or png would all be fine. jpg probably least processor intensive. GSAP basically animates any type of property you can feed it. It's not actually based on a particular image type like vectors, with the exception of certain plugins such as drawsvg. You can use it with whatever type of image you want, the browser handles the rendering.