CSS Plugin diagonal fold

[kathryn.crawford]

Hey guys! Im trying to recreate this as an SVG animation using greensock. I got stuck pretty quickly with a diagonal fold (I'm new to 3D). As you can see, I'm about halfway there! But it doesn't fold quite like it should. I need it to fold like it would with paper, across the diagonal line with no flipping. Any ideas?

See the Pen kkzQRJ by kathryncrawford (@kathryncrawford) on CodePen.

[Gardemarin]

the best solution I think is morphSVG plugin: http://greensock.com/morphSVG.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="400px" height="400px" viewBox="0 0 200 200" style="enable-background:new 0 0 400 400;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#1D1D1D;stroke:#000000;stroke-miterlimit:10;}
	.st1{fill:#88C540;}
	.st2{fill:none;stroke:#E5285D;stroke-miterlimit:10;}
</style>
<rect id="background" class="st0" width="800" height="400"/>
<path id="square" class="st1" d="M30.1,25.1V0.5h30.2h32.8h31.6v29.2v28.6v23H94.5H62.6H29.7H0.5V54.1v-29H30.1z"/>
<path id="square2" class="st2" d="M0.5,0.5h29.6h30.2h32.8h31.6v29.2v28.6v23H94.5H62.6H29.7H0.5V54.1v-29V0.5z"/>
  
</svg>

TweenLite.to("#square", 50, {morphSVG:{shape:"#square2", shapeIndex:1}});
//comment out next line to disable findShapeIndex() UI
findShapeIndex("#square", "#square2");

You can try my code here: 

See the Pen LpxOqR by GreenSock (@GreenSock) on CodePen.

(just paste)

[Jonathan]

Hello kathryn.crawford

 

Keep in mind that SVG 1.1 does not support CSS 3D transforms only 2D. Browsers like Chrome might allow that type of behavior but other browsers like Safari, Firefox, IE, and MSEdge will follow the SVG spec and not allow that non standard behavior. SVG 2.0 will support CSS 3D transforms but that wont be out for who knows how long.

 

For example that is why you see it work in Chrome but not in Firefox. When you use rotationX (rotateX) or rotationY (rotateY) you are rotating and intersecting with the z-axis so that is why it wont work in modern browsers that follow the SVG 1.1 spec, which is standard behavior.

[OSUblake]

On top of the lack of SVG support, you can't create this tween on a single element using GSAP transforms. It requires nesting like this...

See the Pen 50432f8886fbdce336b23c978d6d714c by osublake (@osublake) on CodePen.

[kathryn.crawford]

SHOOT! I was really hoping it could be done, but I guess I didn't know enough to realize how complicated it is! I might try doing this with css altered divs in the future, but for now it seems like more trouble than it's worth. Thanks guys!

[kathryn.crawford]

the best solution I think is morphSVG plugin: http://greensock.com/morphSVG.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="400px" height="400px" viewBox="0 0 200 200" style="enable-background:new 0 0 400 400;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#1D1D1D;stroke:#000000;stroke-miterlimit:10;}
	.st1{fill:#88C540;}
	.st2{fill:none;stroke:#E5285D;stroke-miterlimit:10;}
</style>
<rect id="background" class="st0" width="800" height="400"/>
<path id="square" class="st1" d="M30.1,25.1V0.5h30.2h32.8h31.6v29.2v28.6v23H94.5H62.6H29.7H0.5V54.1v-29H30.1z"/>
<path id="square2" class="st2" d="M0.5,0.5h29.6h30.2h32.8h31.6v29.2v28.6v23H94.5H62.6H29.7H0.5V54.1v-29V0.5z"/>
  
</svg>

TweenLite.to("#square", 50, {morphSVG:{shape:"#square2", shapeIndex:1}});
//comment out next line to disable findShapeIndex() UI
findShapeIndex("#square", "#square2");

You can try my code here: 

See the Pen LpxOqR by GreenSock (@GreenSock) on CodePen.

(just paste)

 

Thanks Gardemarin, that might be worth a try! Wouldn't be completely true to the geometry but I might be able to fake it close enough to work!

[wim_27721]

Hi all,

 

I am currently looking into the same problem (3d diagonal folding).

Has anything changed meanwhile to help solve this?

 

Thanks a lot!

[ZachSaucier]

Hey @wim_27721. SVG 2 is still not here, thus 3D is still not supported at all. 

 

You can find a few different approaches to 3D folding out there. Some use WebGL, some use multiple DOM elements. It's not a simple thing to do something as complex as what the original poster shared.

[wim_27721]

That is clear, thank you Zach.