Comment puis-je faire glisser un élément dans un débordement: conteneur caché utilisant GSAP?

Question

Je vais essayer de le garder concis.

Je suis obligé d'utiliser le plugin draggable pour GSAP dans mon projet. Le plugin est génial et fonctionne très bien. Je pense que mon problème est juste quelque chose que je ne comprends pas très bien.

Codepen: https://codepen.io/mhcdotcom/pen/dzyNmB

Faire glisser l'élément #stage permet la fonctionnalité de cliquer et faire glisser.
L'élément .inner s'étend hors de la div conteneur, donc j'utilise overflow:hidden sur l'élément de scène.
Lorsque je fais cela, la partie des éléments .inner qui s'étend au-delà de la zone visible ne vient pas encadrer et semble être coupée.

Y a-t-il un moyen de contourner cela dans GSAP? Qu'est-ce que je rate?

J'ai cherché Google sans succès.

Toute aide est très appréciée.
Merci

Moe

Answer 1

« All » est draggable fait ajouter une transition à l'élément qui traîne, de sorte que tout débordement etc seront toujours honorés.

Je ne peux pas être sûr à 100% de ce que vous essayez d'atteindre, mais vous pouvez ajouter des classes sur dragStart/dragEnd, ce qui signifie que vous devriez être en mesure d'obtenir le comportement dont vous avez besoin.

J'ai fourchu un codepen en vous donnant un exemple de base.

onDragStart: function() { 
    stage.classList.add('dragging'); 
}, 
onDragEnd: function() { 
    stage.classList.remove('dragging'); 
} 

https://codepen.io/motionimaging/pen/xLxLpG