Jump to content
Search Community

supa

Members
  • Posts

    2
  • Joined

  • Last visited

Posts posted by supa

  1. 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
          	});
    	}
    });

    ss.thumb.jpg.2ec73a660e60326d8c9b6db09bd773e4.jpg
    Thanks for any hints, 
    supa

    See the Pen jOaeEQV by maxbln (@maxbln) on CodePen

×
×
  • Create New...