Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kathryn.crawford

CSS Plugin diagonal fold

Recommended Posts

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

Link to post
Share on other sites

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)

Link to post
Share on other sites

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.

  • Like 1
Link to post
Share on other sites

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!

Link to post
Share on other sites

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!

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×