domotang
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by 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.
-
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:
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);}
Issue with Draggable sticking at the end, ignoring snap
in GSAP
Posted
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,