supa

Hi all, wanted to ask if there is some possibility to drag a svg clip-path attached to a div in 3D space respecting the current 3D transformations created by a third party software (krpano). In krpano the 3D space allows me to set the image- and clip-path-containing div in x-offset and y-offset (or z- and y-offset when on another 90° turned wall). I can drag x/y with below code snippet but the image gets distorted. In my codepen I was able to adapt Craigs work with dragging an SVG clip-path attached to a alpha-containing picture frame-div in 2D space. Now I wanted to adapt this to my 3D space and don't know how to take the current matrix3d translations of the frame-div from krpano into account. The frame-div is set on a wall. Now dragging the div works, I can drag and even change the clip-path a bit, but the dragged div gets distorted to 2D space until released (see attached screenshot: left: distorted div, middle: cut-out clip-path on another div image which moves when dragging the distorted frame, right: the goal of my undertaking, the undistorted frame). The 3D transform of the clip-path div looks like this before distortion: translate3d(1280px, 657.5px, 0px) perspective(465.882px) rotateZ(0deg) translateZ(465.882px) rotateX(-1.95988deg) rotateY(-89.562deg) translate3d(0px, 0px, 0px) translate3d(-462px, -110px, -2px) rotateY(88.5deg) rotateX(0deg) scale3d(1, 1, 1) translateZ(0px) rotate(0deg) translate(243.682px, -6.00213px) rotateZ(0deg) rotateX(0deg) rotateY(0deg) scale(0.2) translate(-500px, -500px) GSAP does this to the transform: transform: matrix3d(0.20001, -0.00000226566, 0.000138008, 0, 0.0000129674, 1.14475, 0, 0, -0.00069, 0, 0.99999, -0.00170998, 1107, -57, 121.898, 0.791554); Is there a possibility to copy the translation values to the GSAP drag function? Draggable.create("#frame", { onDrag: function() { TweenMax.set("#framepath", { x: this.x, y: this.y }); } }); Thanks for any hints, supa

Thank you for this pen, Craig. Is this possible with 3D transformations, maybe by dragging the bounding box? My picture frame obviously gets distorted on x/y-axis if I do 2D-drag within my 360 tour. Hope it is not a too old topic. Glad for recommendations. Best, Max t