Jump to content
Search Community

Issue with Draggable sticking at the end, ignoring snap

domotang test
Moderator Tag

Recommended Posts


I'm building a React component for a business solution using GSAP for all animations. I'm having a slight issue with the Draggable snap feature when thrown. The drag is snapping to my desired elements, but sticks at the end when an onThrown event occurs, whereas I would expect the behavior to bounce back to the nearest snap point.

The working application can be found at:


The event bar is draggable. If you throw to the end, it will stick at the end. Is this a bug? Or an incorrect implementation by me?


Project source can be viewed at:


And the source page showing at:



Thank you for any advice. And as a first time poster with only about three month GSAP experience, if there's any lacking info expected I should have provided, let me know.

Stephen Reed

    Draggable.create(scrollDiv, {
      throwResistance: 0,
      maxDuration: 1,
      trigger: eventNodes.event,
      type: "x",
      inertia: true,
      bounds: {
        minX: -scrollLength,
        maxX: 0
      zIndexBoost: false,
      snap: value => Math.floor(value / xFactor + 1) * xFactor,
      onDrag: _updateScrollTarget,
      onThrowUpdate: _updateScrollTarget
    function _updateScrollTarget() {
      dragAni.progress(this.x / -scrollLength);
Link to comment
Share on other sites

On further review, and a much needed step away from my code, I realized its actually desirable to have the draggable stick at the end, otherwise the last event wouldn't be viewable in full.

Feel like a dunce on my first question!

However, having figured this out, why is it that the bar only sticks at (snaps to) the end when thrown, but bounces back when dragged and released? 

Thanks again. 

Link to comment
Share on other sites

Simple oversight, really. I havent a clue why I was adding 1 to the snap formula.

I changed the snap equation from:

snap: value => Math.floor(value / xFactor + 1) * xFactor


snap: value => Math.round(value / xFactor) * xFactor,

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