Jump to content
Search Community

CSS Plugin diagonal fold

kathryn.crawford test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
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 comment
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 2
Link to comment
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 comment
Share on other sites

  • 4 years later...

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.
×
×
  • Create New...