anime icon indicating copy to clipboard operation
anime copied to clipboard
verified publisher icon juliangarnier

createDraggable throws error when container removed from DOM

Open AndrewPixel opened this issue 1 year ago • 4 comments

I'm using v.4 of animejs.

I have added a number of createDraggable which include onGrab, onRelease, and onSnap (it's based off the example on your website.) The animations work exactly as expected until the container element for them is removed from the DOM. In the console I get the error for each createDraggable:  Uncaught TypeError: Cannot read properties of undefined (reading 'scrollWidth')

I've tried disabling each createDraggable, setting each createDraggable to null... before the container is removed but to no avail.

Perhaps your function updateBoundingValues needs to check that $container exists before continuing?

The full error in the console is:

anime.iife.min.js:9 Uncaught TypeError: Cannot read properties of undefined (reading 'scrollWidth') at _s.updateBoundingValues (anime.iife.min.js:9:47913) at _s.refresh (anime.iife.min.js:9:50775) at se.onComplete (anime.iife.min.js:9:45622) at bt (anime.iife.min.js:9:6208) at St (anime.iife.min.js:9:6305) at kt.update (anime.iife.min.js:9:7485) at Et (anime.iife.min.js:9:8378) updateBoundingValues @ anime.iife.min.js:9 refresh @ anime.iife.min.js:9 onComplete @ anime.iife.min.js:9 bt @ anime.iife.min.js:9 St @ anime.iife.min.js:9 update @ anime.iife.min.js:9 Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame wake @ anime.iife.min.js:9 resume @ anime.iife.min.js:9 restart @ anime.iife.min.js:9 (anonymous) @ anime.iife.min.js:9 anime.iife.min.js:9 Uncaught TypeError: Cannot read properties of undefined (reading 'scrollWidth') at _s.updateBoundingValues (anime.iife.min.js:9:47913) at _s.refresh (anime.iife.min.js:9:50775) at se.onComplete (anime.iife.min.js:9:45622) at bt (anime.iife.min.js:9:6208) at St (anime.iife.min.js:9:6305) at kt.update (anime.iife.min.js:9:7485) at Et (anime.iife.min.js:9:8378) updateBoundingValues @ anime.iife.min.js:9 refresh @ anime.iife.min.js:9 onComplete @ anime.iife.min.js:9 bt @ anime.iife.min.js:9 St @ anime.iife.min.js:9 update @ anime.iife.min.js:9 Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame wake @ anime.iife.min.js:9 resume @ anime.iife.min.js:9 restart @ anime.iife.min.js:9 (anonymous) @ anime.iife.min.js:9 anime.iife.min.js:9 Uncaught TypeError: Cannot read properties of undefined (reading 'scrollWidth') at _s.updateBoundingValues (anime.iife.min.js:9:47913) at _s.refresh (anime.iife.min.js:9:50775) at se.onComplete (anime.iife.min.js:9:45622) at bt (anime.iife.min.js:9:6208) at St (anime.iife.min.js:9:6305) at kt.update (anime.iife.min.js:9:7485) at Et (anime.iife.min.js:9:8378) updateBoundingValues @ anime.iife.min.js:9 refresh @ anime.iife.min.js:9 onComplete @ anime.iife.min.js:9 bt @ anime.iife.min.js:9 St @ anime.iife.min.js:9 update @ anime.iife.min.js:9 Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame wake @ anime.iife.min.js:9 resume @ anime.iife.min.js:9 restart @ anime.iife.min.js:9 (anonymous) @ anime.iife.min.js:9 anime.iife.min.js:9 Uncaught TypeError: Cannot read properties of undefined (reading 'scrollWidth') at _s.updateBoundingValues (anime.iife.min.js:9:47913) at _s.refresh (anime.iife.min.js:9:50775) at se.onComplete (anime.iife.min.js:9:45622) at bt (anime.iife.min.js:9:6208) at St (anime.iife.min.js:9:6305) at kt.update (anime.iife.min.js:9:7485) at Et (anime.iife.min.js:9:8378) updateBoundingValues @ anime.iife.min.js:9 refresh @ anime.iife.min.js:9 onComplete @ anime.iife.min.js:9 bt @ anime.iife.min.js:9 St @ anime.iife.min.js:9 update @ anime.iife.min.js:9 Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame Et @ anime.iife.min.js:9 requestAnimationFrame wake @ anime.iife.min.js:9 resume @ anime.iife.min.js:9 restart @ anime.iife.min.js:9 (anonymous) @ anime.iife.min.js:9

AndrewPixel avatar Apr 14 '25 06:04 AndrewPixel

Does the problem occurs if you call draggable.revert() before removing the container?

juliangarnier avatar Apr 14 '25 09:04 juliangarnier

Yes, draggable.revert() made no difference.

I "fixed" it by adding if (!t) return: to the updateBoundingValues function.

AndrewPixel avatar Apr 14 '25 22:04 AndrewPixel

Ok thanks, will fix this in the upcoming release!

juliangarnier avatar Apr 15 '25 15:04 juliangarnier

Perhaps having a destroy() method that removes all event listeners would be appropriate?

AndrewPixel avatar Apr 15 '25 23:04 AndrewPixel

Perhaps having a destroy() method that removes all event listeners would be appropriate?

This is what revert() is supposed to do.

juliangarnier avatar Apr 17 '25 08:04 juliangarnier

Ah ok.

AndrewPixel avatar Apr 18 '25 01:04 AndrewPixel

@AndrewPixel I can't reproduce the error, see: https://codepen.io/juliangarnier/pen/NPPRKxq?editors=1111 I remove the container in the onSettle callback, but this doesn't cause any issue.

I "fixed" it by adding if (!t) return: to the updateBoundingValues function.

This is weird, I'm guessing t is the container, but to be undefined it would have need to be set to undefined, or it should fallback to the document.body if no valid targets are found.

Can you share a minimal reproduction demo of the bug and reopen?

Thanks!

juliangarnier avatar Apr 22 '25 15:04 juliangarnier