[Draggable y conflict with Window scrollY]

I just added the latest version, but the issue is still there.
Below is a test link:

https://ms85.holdrr.com/timeline/era-1

 

The dragger is exposed in the console.

 

 

**I just realized that I only updated gsap-bonus.tgz but I did not update using npm install, so I was still using 3.0.1!

Everything is fine using 3.2.6!

 

Thanks!

Frank

[Draggable y conflict with Window scrollY]

I couldn't replicate this issue on codepen, so for now, I'm hoping that there is something obvious that I'm missing in regards to Draggable settings.

 

I have a Draggable container that scrolls its inner object perfectly when the window scrollY position is 0. 

 

But when the browser scrolls down and the window scrollY property is more than 0, the Draggable object (onDrag) jumps up to the window scrollY 0 position instead of maintaining its relative position inside of the Draggable container.

 

Do I need to reset the y position so that the scrolling object maintains its relative position within the Draggable container instead of the window scrollY position?

 

Thanks,

Frank

[get Draggable Snap Distance before onThrowComplete]

that's perfect! thx!

[get Draggable Snap Distance before onThrowComplete]

I have a draggable instance that snaps to y position based on an array.

I would like to send out a global event onDragEnd as to what the final snapped position would be.

 

I 'm using this approach, which currently is a little buggy, but I can probably make it more robust.

Is there a more elegant method?

 

const closest = (array, num) => {

    let i = 0;

    let minDiff = 1000;

    let ans;

    for (i in array) {

        let m = Math.abs(num - array);

        if (m < minDiff) {

            minDiff = m;

            ans = array;

        }

    }

    return ans;

}

 

 

 

onDragCompleteY(e) {

    let y = e.layerY;

    let arr = this.generateSnapDistances();

    let finalNum = closest(arr, y);

    let SNAPPED_INDEX = arr.indexOf(finalNum);

}

[Switch Draggable transform to Percentages]

i think i just solved it. i just need to tween back to new position on window resize. i'll try that.

[Switch Draggable transform to Percentages]

Here is a link of the original carousel without percentages:

http://relevant-context.com/

 

This implementation works great with a regular tween and draggable.

 

But when the window is resized, the carousel snap position is off -- ultimatel I'm trying to resolve how to keep the carousel in correct snap position on window resize, when using draggable and a regular tween.

[Switch Draggable transform to Percentages]

I have a carousel that animates by xPercent when clicking menu buttons.

I also use the Draggable with ThrowPlugin on the carousel to swipe left and right on sections of that carousel.

 

The menu tween uses xPercent (which is what I want, since the carousel keeps its place on window resize)

But the Draggable tween uses either translate3D or matrix by pixel values and not percentages.  By the way, I'm use an array for snap: {x: [pos1, pos2, pos3]}

 

I've been able to figure out the new percentage and remove the translate3d value using 'onThrowComplete', but the Draggable values is not cleared.

 

So my questions are:

1. What is the best practice to integrate a regular tween and a Draggable tween on an element, when xPercent is required on the regular tween?

2. What is the correct way to flush out any values when a Draggable event has completed?

 

Any help would be appreciated. Thanks in advance.