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