SVG 吊塔动画 - 踏得网

SVG Animation | Something\'s baking...

SVG

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2472
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

////Naming elements
//Cranes
var craneLineOne = document.getElementsByClassName("crane-line-one");
var craneLineTwo = document.getElementsByClassName("crane-line-two");
var craneKnot = document.getElementsByClassName("crane-knot");

// Star
var starPiece = document.getElementsByClassName("star-piece");
var starCut = document.getElementsByClassName("star-cut");
var starShadow = document.getElementsByClassName("star-shadow");

var wholeKnot = document.getElementsByClassName("whole-knot");

// Roller
var roller = document.getElementsByClassName("roller");
var rollerFold = document.getElementsByClassName("roller-fold");
var rollerShadow = document.getElementsByClassName("roller-fold-shadow");

//// Animation
// Crane 1
var tlCraneOne = new TimelineMax({
    repeat: -1,
    repeatDelay: 5.9,
});
tlCraneOne.set(craneLineOne, {
        transformOrigin: "50% 0%",
    })
    .to(craneLineOne, 1, {
        scaleY: 1.4
    })
    .to(craneLineOne, 2, {
        scaleY: 1
    }, 3)

// Crane 2
var tlCraneTwo = new TimelineMax({
    repeat: -1,
    repeatDelay: 0,
});
tlCraneTwo.set(craneLineTwo, {
        transformOrigin: "50% 0%",
    })
    .to(craneLineTwo, 2, {
        rotation: -8,
        scaleY: .92
    })
    .to(craneLineTwo, 2, {
        rotation: 0,
        scaleY: 1
    }, 2)

//star
var tlstar = new TimelineMax({
    repeat: -1,
    repeatDelay: 5.9,
});
tlstar.to(wholeKnot, 1, {
        y: 38
    })
    .to(wholeKnot, 2, {
        y: 0
    }, 3)

var tlcut = new TimelineMax({
    repeat: -1,
    repeatDelay: 4,
})
tlcut.to(starCut, .1, {
        opacity: 1
    }, 1)
    .to(starCut, 2, {
        opacity: 0
    }, 4.9)

//starShadow
var tlstarsh = new TimelineMax({
    repeat: -1,
    repeatDelay: 5.9,
});
tlstarsh.from(starShadow, 0, {
        transformOrigin: "50% 50%",
        scale: 0
    })
    .to(starShadow, 1, {
        scale: 1.75
    })
    .to(starShadow, 2, {
        scale: 0
    }, 3)

//roller
var tlstar = new TimelineMax({
    repeat: -1,
    repeatDelay: 0,
});
tlstar.to(roller, 2, {
        y: -6,
        x: 18
    })
    .to(roller, 2, {
        y: 0,
        x: 0
    }, 2)

//rollerShadow
var tlrollerSh = new TimelineMax({
    repeat: -1,
    repeatDelay: 0,
});
tlrollerSh.set(rollerShadow, {
        transformOrigin: "100% 50%",
        opacity: 0.05
    })
    .to(rollerShadow, .5, {
        opacity: 0
    })
    .to(rollerShadow, 2, {
        opacity: 0.05
    }, 2)

编译

CSS

HTML

<script src="https://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js"></script>
<div class="container">
    
    <svg version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" xmlns:a="https://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="745.4px" height="745.4px" viewBox="0 0 745.4 745.4" style="enable-background:new 0 0 745.4 745.4;"
    xml:space="preserve">
        <style type="text/css">
            .st0 {
                fill: #C0DBE3;
            }
            .st1 {
                fill: #629ACC;
            }
            .st2 {
                fill: #DBBF9E;
            }
            .st3 {
                fill: #EDCEAB;
            }
            .st4 {
                fill: #E6AA5C;
            }
            .st5 {
                fill: #F3B86C;
            }
            .st6 {
                fill: none;
                stroke: #CCAF8F;
                stroke-miterlimit: 10;
            }
            .st7 {
                fill: none;
                stroke: #DBBF9E;
                stroke-width: 2;
                stroke-miterlimit: 10;
            }
            .st8 {
                fill: none;
                stroke: #629ACC;
                stroke-width: 2;
                stroke-miterlimit: 10;
            }
            .st9 {
                fill: #73A9D9;
            }
            .st10 {
                fill: none;
                stroke: #F2733C;
                stroke-width: 2;
                stroke-miterlimit: 10;
            }
            .st11 {
                fill: #E4BC51;
            }
            .st12 {
                fill: none;
                stroke: #F4C957;
                stroke-miterlimit: 10;
            }
            .st13 {
                fill: #E6682E;
            }
            .st14 {
                fill: #F2733C;
            }
            .st15 {
                fill: #F4C957;
            }
            .st16 {
                fill: none;
                stroke: #F26D34;
                stroke-miterlimit: 10;
            }
            .st17 {
                fill: #F26D34;
            }
            .st18 {
                fill: none;
                stroke: #F4C957;
                stroke-width: 2;
                stroke-linecap: round;
                stroke-linejoin: round;
                stroke-miterlimit: 10;
            }
            .st19 {
                fill: none;
                stroke: #F4C957;
                stroke-linecap: round;
                stroke-linejoin: round;
                stroke-miterlimit: 10;
            }
            .st20 {
                fill: none;
                stroke: #F26D34;
                stroke-linecap: round;
                stroke-linejoin: round;
                stroke-miterlimit: 10;
            }
            .st21 {
                fill: none;
                stroke: #F2733C;
                stroke-width: 2;
                stroke-linecap: round;
                stroke-miterlimit: 10;
            }
            .st22 {
                fill: none;
                stroke: #629ACC;
                stroke-width: 2;
                stroke-linecap: round;
                stroke-miterlimit: 10;
            }
        </style>
        <defs>
        </defs>
        <rect class="st0" width="745.4" height="745.4" />
        <path class="st1" d="M97.5,407.6l256.4-128.2c11.8-5.9,25.7-5.9,37.6,0l256.4,128.2c10,5,10,19.3,0,24.3L391.5,560.1
	c-11.8,5.9-25.7,5.9-37.6,0L97.5,431.9C87.5,426.9,87.5,412.6,97.5,407.6z" />
        <g>
            <g>
                <path class="st2" d="M354.7,386.3c-30,0.6-58.1,16.8-78.7,38.7c-11.8,12.6-22.1,29.1-19,46c1.3,7,4.8,13.4,9.1,19
			c15.6,20.3,41.9,30.3,67.5,31s50.7-7,74.4-16.6c12.6-5.1,25.2-11,35.3-20.2c12.4-11.2,20.4-27.2,21.9-43.8
			c0.7-8-0.1-16.4-4.2-23.3c-4.5-7.6-12.4-12.4-20.3-16.3c-26.5-13.1-56.7-18.6-86.1-15.7" />
            </g>
            <g>
                <path class="st3" d="M275,421.2c-7.4,8.5-22.4,25.8-19,46c1.5,8.9,6,15,9.1,19c15.6,20.3,41.9,30.3,67.5,31
			c25.6,0.7,50.7-7,74.4-16.6c12.6-5.1,25.2-11,35.3-20.2c12.4-11.2,20.4-27.2,21.9-43.8c0.7-8-0.1-16.4-4.2-23.3
			c-5.1-8.6-12.9-13.1-20.3-16.3c-47.9-21.2-86.1-15.7-86.1-15.7C342.7,382.9,302.7,389.2,275,421.2z" />
            </g>
        </g>
        <g class="roller">

<path class="st4" d="M363.8,388.7c0.1,0.4,0.6,5.3-2.8,8.2c-1.3,1.1-2.7,1.5-3.6,1.7c-9.4-4.7-11.4-5.7-20.8-10.4
		c-2.9-1.4-4.1-5-2.6-7.8s5-4.1,7.8-2.6L363.8,388.7z" />
            <path class="st5" d="M352.1,407.2l66.7,33.5l16.4-23.7l0.4-1l-66.7-33.5c-2.1-0.2-6.8-0.5-11,2.4
		C351.7,389,349.1,398.1,352.1,407.2z" />
            <g>
                <path class="st4" d="M423.8,418.7c-2.4,3-3.8,5.7-4.7,7.7c0,0-1.9,4.4-2.1,9.4c-0.1,1.5,0.2,2.5,0.6,3.2c0.1,0.3,0.3,0.5,0.4,0.7
			c1,1.6,2.9,2.4,4.8,2.4c1.8,0,3.6-0.7,5.2-1.6c4.9-2.5,9.4-6.6,10.4-12.2c0.4-2.1,0.2-4.2,0-6.3c-0.3-2.2-1-5.4-3.5-6.6
			c-1.1-0.5-2.1-0.5-3.3-0.4C427.9,415.4,425.2,417.4,423.8,418.7z" />
            </g>
            <path class="st5" d="M425,433C425,433,425,433,425,433c-0.1-0.5-0.6-5.3,2.8-8.2c1.3-1.1,2.7-1.5,3.6-1.7c0,0,0,0,0,0l20.5,10.3
		c2.9,1.4,4.3,4.9,2.9,7.8c-1.4,3-5,4.2-7.9,2.8L425,433z" />
            <path class="st18" d="M404.6,399.8c-4.1-1.5-7.1-0.9-8.4-0.5c-7.6,2.2-12.2,11.5-11,18.9c0.3,2.2,1.1,3.8,1.6,4.8" />
        </g>
        <path class="st6 star-cut" d="M301.6,450.4l16.7,4.9c0.3,0.1,0.6,0.1,0.9,0l17.5-4c1.5-0.3,2.6,1.2,1.9,2.5l-3.7,6.4
	c-0.5,0.8-0.2,1.9,0.6,2.3l8.1,4.6c1.5,0.8,1,3.1-0.7,3.2l-17,0.9c-0.4,0-0.7,0.1-1,0.4l-10.9,8.7c-0.8,0.6-1.9,0.5-2.4-0.3
	l-6.3-8.5c-0.3-0.4-0.7-0.6-1.2-0.7l-15-1.3c-1.8-0.2-2.1-2.6-0.5-3.3l11-4.6c0.7-0.3,1.1-1,1-1.8l-0.9-7.9
	C299.5,450.9,300.5,450.1,301.6,450.4z" />
        <path class="st0" d="M286.7,430.3v-10V430.3z" />
        <path class="st7 star-shadow" d="M308.8,458l8.4,2.5c0.1,0,0.3,0,0.4,0l8.8-2c0.7-0.2,1.3,0.6,0.9,1.3l-1.9,3.2c-0.2,0.4-0.1,0.9,0.3,1.2
	l4.1,2.3c0.7,0.4,0.5,1.5-0.4,1.6l-8.5,0.5c-0.2,0-0.3,0.1-0.5,0.2l-5.5,4.4c-0.4,0.3-0.9,0.2-1.2-0.2l-3.2-4.2
	c-0.1-0.2-0.4-0.3-0.6-0.3l-7.5-0.7c-0.9-0.1-1.1-1.3-0.3-1.6l5.5-2.3c0.3-0.1,0.6-0.5,0.5-0.9l-0.4-3.9
	C307.7,458.2,308.2,457.8,308.8,458z" />
        <g>
            <path class="st2" d="M331.7,484.5l12.5,3.7c0.2,0.1,0.4,0.1,0.6,0l13.2-3c1.1-0.3,2,0.9,1.4,1.9l-2.8,4.8c-0.4,0.6-0.1,1.4,0.5,1.8
		l6.1,3.4c1.1,0.6,0.7,2.3-0.6,2.4l-12.7,0.7c-0.3,0-0.5,0.1-0.7,0.3l-8.2,6.5c-0.6,0.5-1.4,0.3-1.8-0.2l-4.8-6.3
		c-0.2-0.3-0.5-0.5-0.9-0.5l-11.2-1c-1.3-0.1-1.6-1.9-0.4-2.5l8.3-3.5c0.5-0.2,0.8-0.8,0.8-1.3l-0.7-5.9
		C330.1,484.9,330.9,484.3,331.7,484.5z" />
            <path class="st1" d="M331.7,486.5l12.5,3.7c0.2,0.1,0.4,0.1,0.6,0l13.2-3c1.1-0.3,2,0.9,1.4,1.9l-2.8,4.8c-0.4,0.6-0.1,1.4,0.5,1.8
		l6.1,3.4c1.1,0.6,0.7,2.3-0.6,2.4l-12.7,0.7c-0.3,0-0.5,0.1-0.7,0.3l-8.2,6.5c-0.6,0.5-1.4,0.3-1.8-0.2l-4.8-6.3
		c-0.2-0.3-0.5-0.5-0.9-0.5l-11.2-1c-1.3-0.1-1.6-1.9-0.4-2.5l8.3-3.5c0.5-0.2,0.8-0.8,0.8-1.3l-0.7-5.9
		C330.1,486.9,330.9,486.3,331.7,486.5z" />
        </g>
        <g>
            <path class="st2" d="M369.8,460.5l8.4,2.5c0.1,0,0.3,0,0.4,0l8.8-2c0.7-0.2,1.3,0.6,0.9,1.3l-1.9,3.2c-0.2,0.4-0.1,0.9,0.3,1.2
		l4.1,2.3c0.7,0.4,0.5,1.5-0.4,1.6l-8.5,0.5c-0.2,0-0.3,0.1-0.5,0.2l-5.5,4.4c-0.4,0.3-0.9,0.2-1.2-0.2l-3.2-4.2
		c-0.1-0.2-0.4-0.3-0.6-0.3l-7.5-0.7c-0.9-0.1-1.1-1.3-0.3-1.6l5.5-2.3c0.3-0.1,0.6-0.5,0.5-0.9l-0.4-3.9
		C368.7,460.8,369.3,460.4,369.8,460.5z" />
            <path class="st1" d="M369.8,462.3l8.4,2.5c0.1,0,0.3,0,0.4,0l8.8-2c0.7-0.2,1.3,0.6,0.9,1.3l-1.9,3.2c-0.2,0.4-0.1,0.9,0.3,1.2
		l4.1,2.3c0.7,0.4,0.5,1.5-0.4,1.6l-8.5,0.5c-0.2,0-0.3,0.1-0.5,0.2l-5.5,4.4c-0.4,0.3-0.9,0.2-1.2-0.2l-3.2-4.2
		c-0.1-0.2-0.4-0.3-0.6-0.3l-7.5-0.7c-0.9-0.1-1.1-1.3-0.3-1.6l5.5-2.3c0.3-0.1,0.6-0.5,0.5-0.9l-0.4-3.9
		C368.7,462.5,369.3,462.1,369.8,462.3z" />
        </g>
        <g class="whole-knot">
            <g class="star-piece">
                <path class="st8" d="M301.6,412.1l16.8,4.9c0.2,0.1,0.5,0.1,0.8,0l18.1-4.1c1.3-0.3,2.3,1.1,1.6,2.2l-4.1,7
			c-0.4,0.7-0.2,1.7,0.6,2.1l8.9,5c1.3,0.7,0.8,2.7-0.7,2.8l-17.8,1c-0.3,0-0.6,0.1-0.9,0.3l-11.1,8.9c-0.7,0.5-1.6,0.4-2.1-0.3
			l-6.5-8.7c-0.3-0.3-0.6-0.6-1.1-0.6l-15.9-1.4c-1.6-0.1-1.9-2.3-0.4-2.9l11.9-5c0.6-0.3,1-0.9,0.9-1.5l-0.9-8
			C299.5,412.7,300.5,411.8,301.6,412.1z" />
                <path class="st9" d="M286.8,419.2c0.1,0.6,0.6,1.1,1.3,1.2l15.9,1.4c0.4,0,0.8,0.3,1.1,0.6l6.5,8.7c0.5,0.7,1.5,0.8,2.1,0.3
			l11.1-8.9c0.2-0.2,0.5-0.3,0.9-0.3l17.8-1c1.1-0.1,1.7-1.2,1.3-2.1l0.1,10.5c0.1,0.8-0.5,1.6-1.4,1.6l-17.8,1
			c-0.3,0-0.6,0.1-0.9,0.3l-11.1,8.9c-0.7,0.5-1.6,0.4-2.1-0.3l-6.5-8.7c-0.3-0.3-0.6-0.6-1.1-0.6l-15.9-1.4c0,0-1.1-0.1-1.5-1.2" />
                <path class="st9" d="M339,404.3l0,10.2c0,0.1,0,0.3-0.1,0.5c0,0.1-0.1,0.3-0.1,0.3c-0.3,0.6-0.7,1.1-1,1.7l-3.1-4.7l0,0L339,404.3z
			" />
                <path class="st9" d="M344.2,419.5l-8.9-5c-0.7-0.4-1-1.3-0.6-2.1l4.1-7c0.7-1.1-0.3-2.5-1.6-2.2l-18.1,4.1c-0.3,0.1-0.5,0-0.8,0
			l-16.8-4.9c-1-0.3-2,0.5-1.9,1.6l0.9,8c0.1,0.7-0.3,1.3-0.9,1.5l-11.9,5c-1.4,0.6-1.1,2.7,0.4,2.9l15.9,1.4c0.4,0,0.8,0.3,1.1,0.6
			l6.5,8.7c0.5,0.7,1.5,0.8,2.1,0.3l11.1-8.9c0.2-0.2,0.5-0.3,0.9-0.3l17.8-1C345,422.2,345.5,420.2,344.2,419.5z M334.7,421.6
			l-8.9,0.6c-0.3,0-0.9,0.1-1.1,0.3l-11.1,8.8c-0.7,0.5-0.8,0.6-1.4,0l-7-9.1c-0.3-0.3-0.6-0.3-1.1-0.3l-3.5-0.3l-0.7-7
			c0.2-0.1,0.9-0.4,1.4-1.2c0.6-1,0.3-2,0.2-2.2c5.6,1.6,11.2,3.3,16.8,4.9c0.2,0.1,0.5,0.1,0.8,0l14.4-3.3c0,0.1,0,0.3,0,0.4
			c0,0.2,0,0.3,0,0.4c0,0,0.1,0.3,0.2,0.6c0.3,0.6,1,1,1.1,1c0.7,0.4,1.5,0.9,2.5,1.5C336.5,418.5,335.6,419.9,334.7,421.6z" />
                <path class="st8" d="M301.6,402.4l16.8,4.9c0.2,0.1,0.5,0.1,0.8,0l18.1-4.1c1.3-0.3,2.3,1.1,1.6,2.2l-4.1,7
			c-0.4,0.7-0.2,1.7,0.6,2.1l8.9,5c1.3,0.7,0.8,2.7-0.7,2.8l-17.8,1c-0.3,0-0.6,0.1-0.9,0.3l-11.1,8.9c-0.7,0.5-1.6,0.4-2.1-0.3
			l-6.5-8.7c-0.3-0.3-0.6-0.6-1.1-0.6l-15.9-1.4c-1.6-0.1-1.9-2.3-0.4-2.9l11.9-5c0.6-0.3,1-0.9,0.9-1.5l-0.9-8
			C299.5,402.9,300.5,402.1,301.6,402.4z" />
                <line class="st22" x1="286.7" y1="420.3" x2="286.7" y2="430.3" />
                <line class="st22" x1="344.9" y1="420.5" x2="344.9" y2="430.8" />
            </g>
            <g class="crane-knot">
                <circle class="st14" cx="315.8" cy="389.4" r="4.3" />
                <polyline class="st21" points="324.9,423.6 315.8,389.4 299.6,413.6 	" />
                <line class="st21" x1="315.8" y1="389.4" x2="304.1" y2="422.9" />
                <line class="st21" x1="334.7" y1="413.5" x2="315.8" y2="389.4" />
            </g>
        </g>
        <line class="st10 crane-line-one" x1="318.7" y1="286.9" x2="315.8" y2="389.4" />
        <g>
            <polygon class="st11" points="327.8,295 340.7,286.9 340.7,272.3 327.5,279.8 	" />
            <polygon class="st12" points="177,412.4 229.4,442.7 255.7,427.6 203.2,397.3 	" />
            <polygon class="st12" points="229.4,442.7 229.4,450.3 176.9,420 177,412.4 	" />
            <polygon class="st12" points="229.4,450.3 255.7,435.1 255.7,427.6 229.4,442.7 	" />
            <polygon class="st13" points="196.7,416.2 196.7,204.1 209.8,211.7 209.8,423.8 	" />
            <polygon class="st14" points="209.8,423.8 222.9,416.2 222.9,204.1 209.8,211.7 	" />
            <polygon class="st15" points="157.3,181.3 327.9,279.8 341,272.3 170.4,173.8 	" />
            <polygon class="st11" points="157.3,181.3 157.3,196.5 327.9,295 327.9,279.8 	" />
            <line class="st16" x1="209.8" y1="163.7" x2="183.1" y2="189.2" />
            <polygon class="st13" points="196.7,201.6 196.6,171.3 209.8,178.9 209.8,209.2 	" />
            <polygon class="st17" points="209.8,178.9 222.9,171.3 222.9,201.6 209.8,209.2 	" />
            <polygon class="st17" points="196.6,171.3 209.8,163.7 222.9,171.3 209.8,178.9 	" />
            <polygon class="st12" points="203.2,420 203.2,223 216.3,230.6 216.3,427.6 	" />
            <polygon class="st12" points="216.3,427.6 229.4,420.1 229.4,238.2 216.3,230.6 	" />
            <polyline class="st12" points="203.2,298.8 216.3,336.9 203.2,329.1 	" />
            <polyline class="st12" points="203.2,358.6 216.3,396.5 203.2,388.9 	" />
            <polyline class="st12" points="203.2,269.5 216.3,277.1 203.2,239.2 	" />
            <line class="st12" x1="216.3" y1="277.1" x2="229.5" y2="272.3" />
            <polygon class="st16" points="327.9,286.9 327.9,270.9 157.3,173.8 157.3,190.2 	" />
            <line class="st16" x1="275.1" y1="241.9" x2="275.1" y2="257" />
            <line class="st16" x1="183.1" y1="189.2" x2="183.5" y2="204.1" />
            <polyline class="st16" points="170.4,197.6 170.4,181.4 209.8,163.7 	" />
            <polyline class="st16" points="236,218.6 209.8,163.7 262.3,233.5 	" />
            <polyline class="st16" points="327.9,270.9 341,264.7 170.4,166.2 157.3,173.8 	" />
            <polyline class="st16" points="341.2,264.3 341.2,279.3 328,286.9 314.8,263.4 301.6,272 288.5,249.5 275.1,257 262.3,233.5 
		248.6,242 236,218.6 222.9,226.8 209.8,204.1 196.6,211.7 183.1,189.2 170.4,197.6 157.4,173.6 	" />
        </g>
        <g class="crane-line-two">
            <line class="st18" x1="388.4" y1="181.9" x2="386.8" y2="407.8" />
            <circle class="st15" cx="387.3" cy="240.1" r="4.3" />
        </g>

<g>
            <polygon class="st19" points="527.9,380.4 475.4,410.7 449.2,395.6 501.7,365.3 	" />
            <polygon class="st19" points="475.4,410.7 475.4,418.3 527.9,388 527.9,380.4 	" />
            <polygon class="st19" points="475.4,418.3 449.2,403.1 449.2,395.6 475.4,410.7 	" />
            <polygon class="st13" points="508.2,384.2 508.2,114.1 495.1,121.7 495.1,391.8 	" />
            <polygon class="st14" points="495.1,391.8 482,384.2 482,114.1 495.1,121.7 	" />
            <polygon class="st15" points="547.6,91.3 377,189.8 363.9,182.3 534.5,83.8 	" />
            <polygon class="st11" points="547.6,91.3 547.6,106.5 377,205 377,189.8 	" />
            <line class="st20" x1="495.1" y1="73.7" x2="521.8" y2="99.2" />
            <polygon class="st13" points="508.2,111.6 508.2,81.3 495.1,88.9 495.1,119.2 	" />
            <polygon class="st17" points="495.1,88.9 482,81.3 482,111.6 495.1,119.2 	" />
            <polygon class="st17" points="508.2,81.3 495.1,73.7 482,81.3 495.1,88.9 	" />
            <polygon class="st19" points="501.7,388 501.7,133 488.5,140.6 488.5,395.6 	" />
            <polygon class="st19" points="488.5,395.6 475.4,388.1 475.4,148.2 488.5,140.6 	" />
            <polyline class="st19" points="501.7,179.5 488.6,187.1 501.7,149.2 	" />
            <line class="st19" x1="488.6" y1="187.1" x2="475.4" y2="182.3" />
            <polygon class="st11" points="377,189.8 377,205 364.2,196.9 363.9,182.3 	" />
            <polygon class="st20" points="377,196.9 377,180.9 547.6,83.8 547.6,100.2 	" />
            <line class="st20" x1="429.8" y1="150.8" x2="429.8" y2="167" />
            <line class="st20" x1="521.8" y1="100.2" x2="521.3" y2="115.1" />
            <polyline class="st20" points="468.9,128.6 495.1,73.7 442.6,143.5 	" />
            <polyline class="st20" points="377,180.9 363.9,174.7 534.5,76.2 547.6,83.8 	" />
            <polyline class="st20" points="364.2,175.3 364.2,189.3 377.6,196.9 390.4,173.4 403.4,182 416.5,159.5 429.8,167 442.6,143.5 
		456.2,152 468.9,128.6 482,136.8 495.1,114.1 508.2,121.7 521.8,99.2 534.5,107.6 548.2,83.6 	" />
            <polyline class="st19" points="501.7,239.5 488.6,247.1 501.7,209.2 	" />
            <line class="st19" x1="488.6" y1="247.1" x2="475.4" y2="242.3" />
            <polyline class="st19" points="501.7,299.5 488.6,307.1 501.7,269.2 	" />
            <line class="st19" x1="488.6" y1="307.1" x2="475.4" y2="302.3" />
            <polyline class="st19" points="501.7,359.5 488.6,367.1 501.7,329.2 	" />
            <line class="st19" x1="488.6" y1="367.1" x2="475.4" y2="362.3" />
            <polyline class="st20" points="534.2,107.3 534.2,91.3 495.1,73.7 	" />
        </g>

<path class="st21" d="M304.1,422.9" />
        <path class="st21" d="M299.8,413.1" />

<g class="roller-fold">
            <path class="st23 roller-fold-shadow" d="M349,407c8,0.2,19.7,1.4,32.7,6.5c21.5,8.6,34.3,23.1,40,30.5L349,407z" />
            <path class="st3" d="M347,407c8.3,0.9,19,3.1,30.7,7.8c20.7,8.4,34.4,21,42,29.2L347,407z" />
        </g>
    </svg>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>