Issue with Draggable sticking at the end, ignoring snap

[domotang]

Hi,

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:

http://domosavant.com/

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:

https://github.com/domotang/progress-timeline-bar

And the source page showing at:

https://github.com/domotang/progress-timeline-bar/blob/master/src/template/pTBMaterialAnimations.js

 

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);

    }

[domotang]

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. 

[domotang]

Addressed!
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

to

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

[GreenSock]

Thanks for letting us know you solved it, @domotang, and for sharing the solution. Let us know if you need anything else. 

 

Happy tweening/dragging!