Draggable update() is not updating when in throwing state

[Fullsix SL]

Hi,

 

I'm trying to reorder elements in a carousel to make it infinite. When im dragging there is no problem, i can reorder them and it's all ok. But when i release it, throwing it, the update() method of the draggable don't update the value of the Inertia Plugin. Is there a way to do this?

 

Draggable instantiation:

const draggableConfig = {
    throwResistance: 10000,
    minimumMovement:6,
    onThrowUpdate: throttle((e) => {
        this.updateInnerElements();
    },50),
    onDrag: throttle((e) => {
        this.updateInnerElements();
    }, 50),
}

this.works when called onDrag, but no when called by onThrowUpdate

 

updateInnerElements () {
    let dirty = false;
    console.log("x", this.draggable.draggableInstance.x)
    if(this.draggable.draggableInstance.x < -this.itemWidth) {
        console.log("left", this.draggable.draggableInstance.x + this.itemWidth)
        this.slides.push(this.slides.shift());
        this.slides.forEach(x => this.wrapper.appendChild(x));
        gsap.set(this.wrapper, {x: this.draggable.draggableInstance.x + this.itemWidth});
        this.draggable.draggableInstance.update();
        dirty = true;

    }
    if(this.draggable.draggableInstance.x >= 0) {
        console.log("right")
        this.slides.unshift(this.slides.pop());
        this.slides.forEach(x => this.wrapper.appendChild(x));
        gsap.set(this.wrapper, {x: this.draggable.draggableInstance.x - this.itemWidth});
        this.draggable.draggableInstance.update();
        dirty = true;
    }
    if(dirty) {
        console.log('updated');
        console.log("afterX", this.draggable.draggableInstance.x)
    }
}

Can you help me? Thanks

 

[ZachSaucier]

Hey Fullsix. If you'd like debugging help please create a minimal demo of the issue using something like CodePen.

[Fullsix SL]

ok, here is the example

See the Pen ZEBoqJJ?editors=1111 by 7daysofrain (@7daysofrain) on CodePen

 

If you see the log you will see that if i update the draggable to a new value, it looks ok, but inertia plugin is setting it again to its old value:

[ZachSaucier]

What effect are you trying to make? I think you're overcomplicating things.

[Fullsix SL]

I am trying to make the scroll of slides infinite swaping slides from start to end and from end to start when they are not in the visible area. If you disable the intertia in the codepen, everything goes ok, you can drag and drag and you never reach the end...

[ZachSaucier]

Yeah, I would definitely approach this more like we do in the main thread on this subject:

Like this:

See the Pen GRNdVbP?editors=0010 by GreenSock (@GreenSock) on CodePen

[Fullsix SL]

wow, a lot of gsap magic involved there. I need a few hours to dig into this but looks exactly what i need. Thanks!

[Fullsix SL]

ok, i see, moving the items individually and using wrap and a proxy is mentally more complex for me (didn't know about that utilities, which are cool), but indeed is a more elegant solution that swapping the elements in the container.

 

btw is ok then that the inertia plugin doesn't care about draggable.update()?

 

Thanks for your support.

[ZachSaucier]

2 hours ago, Fullsix SL said:

is ok then that the inertia plugin doesn't care about draggable.update()?

Sorry, I don't understand the question. Can you try to rephrase?

[Fullsix SL]

Yes, in my example, when i do

 

var frame = 1;
function onUpdateHandler(){
  console.log("frame " + frame);
  frame++;
  console.log("before x:", draggableInstance.x)
  if(draggableInstance.x > 800) {
	gsap.set(el, {x: draggableInstance.x - 800});
	draggableInstance.update();
	console.log("after x:", draggableInstance.x)
  }
}
// While dragging:
// Frame 1: before x = 1000, after x = 200;
// Frame 2: before x = 200
// While throwing:
// Frame 1: before x = 1000, after x = 200;
// Frame 2: before x = 1000, after x = 200;

while dragging, i can draggable.update() and the value is retained in the next frame (intented behavior),but when i release the mouse and inertia plugin is working, the value "resets" itself to its previous state

[ZachSaucier]

I think @GreenSock is probably better suited to answer whether or not that sort of thing should work.

[Fullsix SL]

Just curious, your solution saved me anyway