SVG Folding Envelope - html

Question

I am toying with SVGs and how it works. I am trying to animate this SVG, where the envelope closes and flies off to the right, then a check mark appears.
So far, i have done the envelope SVG, i have managed to get the top to flip down, but it is above the envelope, i need it to close the envelope. It is also flipping in the wrong direction..
How do i fix this?
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 805 314" style="enable-background:new 0 0 805 314;" xml:space="preserve">
<style type="text/css">
.st0{fill:#3B97D3;stroke:#000000;stroke-miterlimit:10;}
.st1{fill:#F1F2F2;stroke:#000000;stroke-miterlimit:10;}
.st2{fill:#E6E7E8;stroke:#000000;stroke-miterlimit:10;}
.st3{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
.st3{
transform-origin:55% 50%;
-moz-transform-origin:55% 50%;
animation: flipX 1.6s forwards;
}
#-webkit-keyframes flipX {
0% {
opacity:0;
-webkit-transform: perspective(400px) translateZ(0) rotateX(0) scale(1);
transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
}
100% {
opacity:1;
-webkit-transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1);
transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1);
}
}
#keyframes flipX {
0% {
opacity:0;
-webkit-transform: perspective(400px) translateZ(0) rotateX(0) scale(1);
transform: perspective(400px) translateZ(0) rotateX(0) scale(1);
}
100% {
opacity:1;
-webkit-transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1);
transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1);
}
}
.flipX{
opacity:0;
-webkit-animation: flipX 2s cubic-bezier(0.2, 0.3, 0.25, 0.9) forwards;
animation: flipX 2s cubic-bezier(0.2, 0.3, 0.25, 0.9) forwards;
}
</style>
<g id="Layer_1">
<rect id="XMLID_42_" class="st0" width="805" height="314"/>
</g>
<g id="Layer_2">
<rect id="XMLID_1_" x="55" y="129" class="st1" width="192" height="98"/>
<g id="Layer_3">
<polyline id="XMLID_43_" class="st2" points="55,129 151,178 247,129 "/>
<polyline id="XMLID_3_" class="st3" points="55,129 151,64 247,129 "/>
</g>
</g>
</svg>

Answer 1

If you don't want something to move during a rotation, put it at the origin.
A quick fix in this case is to change the coordinates of the flap element so that the long edge has a y-coordinate of zero, then wrap the element in a <g> element with a transform attribute to place it where it's supposed to go.
Get rid of the transform-origin style too.
This works, but could be cleaned up a lot:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 805 314" style="enable-background:new 0 0 805 314;" xml:space="preserve">
<style type="text/css">
.st0{fill:#3B97D3;stroke:#000000;stroke-miterlimit:10;}
.st1{fill:#F1F2F2;stroke:#000000;stroke-miterlimit:10;}
.st2{fill:#E6E7E8;stroke:#000000;stroke-miterlimit:10;}
.st3{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
.st3{
animation: flipX 1.6s forwards;
}
#-webkit-keyframes flipX {
0% {
opacity:0;
-webkit-transform: perspective(400px) translateZ(0) rotateX(0) scale(1);
transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
}
100% {
opacity:1;
-webkit-transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1);
transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1);
}
}
#keyframes flipX {
0% {
opacity:0;
-webkit-transform: perspective(400px) translateZ(0) rotateX(0) scale(1);
transform: perspective(400px) translateZ(0) rotateX(0) scale(1);
}
100% {
opacity:1;
-webkit-transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1);
transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1);
}
}
.flipX{
opacity:0;
-webkit-animation: flipX 2s cubic-bezier(0.2, 0.3, 0.25, 0.9) forwards;
animation: flipX 2s cubic-bezier(0.2, 0.3, 0.25, 0.9) forwards;
}
</style>
<g>
<rect class="st0" width="805" height="314"/>
</g>
<g>
<rect x="55" y="129" class="st1" width="192" height="98"/>
<g>
<polyline class="st2" points="55,129 151,178 247,129 "/>
<g transform="translate(0 129)">
<polyline class="st3" points="55,0 151,-65 247,0 "/>
</g>
</g>
</g>
</svg>

Answer 2

If you add translateY(-65px) to the 100% keyframe, it moves the envelope flap down as it's flipping it. 65px is an eyeball figure.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 805 314" style="enable-background:new 0 0 805 314;" xml:space="preserve">
<style type="text/css">
.st0{fill:#3B97D3;stroke:#000000;stroke-miterlimit:10;}
.st1{fill:#F1F2F2;stroke:#000000;stroke-miterlimit:10;}
.st2{fill:#E6E7E8;stroke:#000000;stroke-miterlimit:10;}
.st3{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
.st3{
transform-origin:55% 50%;
-moz-transform-origin:55% 50%;
animation: flipX 1.6s forwards;
}
#-webkit-keyframes flipX {
0% {
opacity:0;
-webkit-transform: perspective(400px) translateZ(0) rotateX(0) scale(1);
transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
}
100% {
opacity:1;
-webkit-transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1);
transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1) translateY(-65px);
}
}
#keyframes flipX {
0% {
opacity:0;
-webkit-transform: perspective(400px) translateZ(0) rotateX(0) scale(1);
transform: perspective(400px) translateZ(0) rotateX(0) scale(1);
}
100% {
opacity:1;
-webkit-transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1);
transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1) translateY(-65px);
}
}
.flipX{
opacity:0;
-webkit-animation: flipX 2s cubic-bezier(0.2, 0.3, 0.25, 0.9) forwards;
animation: flipX 2s cubic-bezier(0.2, 0.3, 0.25, 0.9) forwards;
}
</style>
<g id="Layer_1">
<rect id="XMLID_42_" class="st0" width="805" height="314"/>
</g>
<g id="Layer_2">
<rect id="XMLID_1_" x="55" y="129" class="st1" width="192" height="98"/>
<g id="Layer_3">
<polyline id="XMLID_43_" class="st2" points="55,129 151,178 247,129 "/>
<polyline id="XMLID_3_" class="st3" points="55,129 151,64 247,129 "/>
</g>
</svg>