Depot43-Unterlagen - SVG Greensock

HTML Elemente

            
            





    <meta charset="UTF-8">
    <title>Urnersee Vektorgrafik Greensock</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Urnersee SVG and GSAP">
	<link rel="stylesheet" type="text/css" href="https://depot43.ch/unterlagen/assets/svg/greensock/normalize.css">
	<link rel="stylesheet" type="text/css" href="https://depot43.ch/unterlagen/assets/svg/greensock/main.css">
	<script type="text/javascript" src="https://depot43.ch/unterlagen/assets/svg/greensock/TweenMax.min.js"></script>
	<script type="text/javascript" src="https://depot43.ch/unterlagen/assets/svg/greensock/DrawSVGPlugin.min.js"></script> 

	<style> 
        body {
            background: #7981B2;
            color: #fff;
        }
        #bodyimage {
            z-index: 2;
            position: relative;
            width:100%;
            max-width:550px;
            background-color: #9A9AE4;
            background: url(http://depot43.ch/unterlagen/assets/svg/greensock/urnersee.svg);
            background-size: 100% auto;
            background-repeat: no-repeat;
            border: 1px solid #ccc;
            margin:auto;
        }

        /* Content */

        .svg-container {
            width:30%;
            margin: 20% auto 0px auto;
        }
        #circleLW, #circleRW {
            stroke:white;
        }
        #circleL, #circleR {
            stroke:#484A79;
            stroke-width:3;
        }

    </style> 


   
   <div id="bodyimage">
	<div class="container">

		<div class="content">
			<div class="svg-container" id="container">
				<svg id="loader" width="100%" height="100%" viewbox="0 0 200 200" preserveaspectratio="xMidYMid meet">
					<path id="jump" fill="none" stroke="#484A79" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M47.5,94.3c0-23.5,19.9-42.5,44.5-42.5s44.5,19,44.5,42.5"></path>
					<g stroke="#383845" stroke-width="1">
						<ellipse id="circleL" fill="none" stroke-miterlimit="10" cx="47.2" cy="95.6" rx="10" ry="2.7"></ellipse>
						<ellipse id="circleR" fill="none" stroke-miterlimit="10" cx="136.2" cy="95.6" rx="10" ry="2.7"></ellipse>
						<ellipse id="circleLW" fill="none" stroke-miterlimit="10" cx="47.2" cy="95.6" rx="15" ry="3"></ellipse>
						<ellipse id="circleRW" fill="none" stroke-miterlimit="10" cx="136.2" cy="95.6" rx="15" ry="3"></ellipse>
					</g>
				</svg>
			</div>
		</div>
	</div>
</div>
	<!-- /container -->
   
   <script>
	(function() {
		var container = document.getElementById('container');
		var loader = document.getElementById('loader');
		var circleL = document.getElementById('circleL');
		var circleR = document.getElementById('circleR');
        var circleLW = document.getElementById('circleLW');
		var circleRW = document.getElementById('circleRW');
		var jump = document.getElementById('jump');
		var jumpRef = jump.cloneNode();
		
		loader.appendChild(jumpRef);
/*
		TweenMax.set([container, loader], {
			position: 'absolute',
			top:'50%',
			left: '50%',
			xPercent: -50,
			yPercent: -50
		})
*/
		TweenMax.set(jumpRef, {
			transformOrigin: '50% 110%',
			scaleY: -1,
			alpha: 0.05
		})

		var tl = new TimelineMax({
			repeat: -1,
			yoyo: false
		});

		tl.timeScale(2);

		tl.set([jump, jumpRef], {
			drawSVG: '0% 0%'
		})
		.set([circleL, circleR, circleLW, circleRW], {
			attr: {
				rx: 0,
				ry: 0,
			}
		})
		.to([jump, jumpRef], 0.4, {
			drawSVG: '0% 30%',
			ease: Linear.easeNone
		})
		.to(circleL, 2, {
			attr: {
				rx: '+=50',
				ry: '+=10'
			},
			alpha: 0,
			ease: Power1.easeOut
		}, '-=0.02')
        .to(circleLW, 2, {
			attr: {
				rx: '+=40',
				ry: '+=8'
			},
			alpha: 0,
			ease: Power1.easeOut
		}, '-=2')
		.to([jump, jumpRef], 1, {
			drawSVG: '50% 80%',
			ease: Linear.easeNone
		}, '-=1.9')
		.to([jump, jumpRef], 0.7, {
			drawSVG: '100% 100%',
			ease: Linear.easeNone
		}, '-=0.9')
		.to(circleR, 2, {
			attr: {
				rx: '+=50',
				ry: '+=10'
			},
			alpha: 0,
			ease: Power1.easeOut
		}, '-=.02')
        .to(circleRW, 2, {
			attr: {
				rx: '+=40',
				ry: '+=8'
			},
			alpha: 0,
			ease: Power1.easeOut
		}, '-=1.8')
        
	})();
	</script>

    






 

            

Persöhnliche Bemerkung

Das erstellen von SVG-Elementen mit Code ... :

tl.set([jump, jumpRef], {
     drawSVG: '0% 0%'
 })
 .   set([circleL, circleR, circleLW, circleRW], {
         attr: {
         rx: 0,
         ry: 0,
     }
 })

finde ich immer etwas bemühend. Für eine gestalterische Arbeit ist es oft sinnlicher, mit einem Programm mit Timeline arbeiten zu können.

Anders fühlt es sich an, in einem Vektor-Programm gezeichnete SVG-Elemente zu animieren.