CSS Plugin diagonal fold

[kathryn.crawford 11 Likes (Newbie)]

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 3 Likes (Newbie)]

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 5,176 Likes (Superhero)]

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 9,990 Likes (Superhero)]

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 11 Likes (Newbie)]

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 11 Likes (Newbie)]

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!