Mérei Tamás webdesigner   »   HTML, CSS   »   SVG animáció GSAP használatával

SVG animáció GSAP használatával

Szerző:   |   2018-05-21

Vektorgrafikus képeket akár elemenként is animálhatunk.

A működő kódot ide kattintva tudod megnézni.

Videó

Videó

HTML forráskód


<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>GSAP</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>
	<script src="script.js"></script>
	<link rel="stylesheet" href="style.css">
</head>
<body>

	<div class="page-wrapper">
		<div class="wrapper">

			<svg xmlns="http://www.w3.org/2000/svg" id="logo" viewBox="0 0 244.1 160.8">
				<linearGradient id="letter-w_1_" x1="106.4" x2="106.4" y1="17.8" y2="122" gradientUnits="userSpaceOnUse">
					<stop offset="0" stop-color="#008ecf"/>
					<stop offset="1" stop-color="#21689a"/>
				</linearGradient>
				<path id="letter-w" fill="url(#letter-w_1_)" d="M27 17.8L64 38l15.8 50.2 16.3-50.6h18l19.4 50.3L157 37.8h28.8L143.4 122h-26.3l-11.7-38.5L91.7 122H65.4z"/>
				<path id="letter-a" fill="#B2D235" d="M217 122h-64.6l12-23.8h14.7l-22-60.5h28.8l22.4 60.5z"/>
				<linearGradient id="gradient-blue_1_" x1="169.3" x2="137.4" y1="67.6" y2="88.1" gradientUnits="userSpaceOnUse">
					<stop offset="0" stop-color="#1b5681"/>
					<stop offset="1" stop-color="#1b75bb" stop-opacity="0"/>
				</linearGradient>
				<path id="gradient-blue" fill="url(#gradient-blue_1_)" d="M157 37.8l-23.5 50.1 9.9 34.1 25.8-51.2z"/>
				<linearGradient id="gradient-green_1_" x1="439.3" x2="407" y1="-1575.4" y2="-1611.6" gradientTransform="translate(-234.1 1669)" gradientUnits="userSpaceOnUse">
					<stop offset="0" stop-color="#92ae2a"/>
					<stop offset="1" stop-color="#b2d235" stop-opacity="0"/>
				</linearGradient>
				<path id="gradient-green" fill="url(#gradient-green_1_)" d="M179 98.2l-9.8-27.4 16.6-33 22.5 60.4z"/>
				<g id="letters" fill="#fff">
					<path class="letter" d="M116.2 140H115c-.3 0-.6-.3-.6-.6s.3-.5.6-.5h1.4l.6-3.4h-1.4a.6.6 0 0 1-.6-.6c0-.3.3-.5.6-.5h1.6l.4-2.4c0-.3.3-.5.6-.5s.6.3.5.7l-.4 2.2h3l.4-2.4c0-.3.3-.5.6-.5.4 0 .6.3.5.7l-.3 2.2h1.2c.3 0 .6.2.6.5s-.3.6-.6.6h-1.4l-.6 3.4h1.4c.3 0 .6.2.6.5s-.3.6-.6.6h-1.6l-.4 2.4c0 .3-.3.5-.6.5s-.6-.4-.5-.7l.4-2.2h-3l-.5 2.4c0 .2-.2.5-.5.5-.4 0-.6-.3-.6-.7l.4-2.2zm4.4-1.1l.5-3.4h-3l-.5 3.4h3z"/>
					<path class="letter" d="M125.9 132.4l-.1-.3c0-.3.3-.6.7-.6.3 0 .5.2.6.5l3.1 9 3-9c0-.3.2-.5.6-.5.4 0 .6.2.7.5l2.9 9 3-9c.2-.3.4-.5.7-.5.3 0 .6.3.6.6v.3l-3.6 10c-.1.3-.4.5-.7.5-.4 0-.6-.2-.7-.5l-3-8.6-2.8 8.6c-.2.3-.4.5-.7.5h-.1c-.3 0-.5-.2-.7-.5l-3.5-10z"/>
					<path class="letter" d="M146.6 143c-2.3 0-4.1-1.8-4.1-4.3 0-2.4 1.7-4.4 4-4.4 2.4 0 3.8 2 3.8 4.2 0 .4-.3.6-.6.6h-6c.2 1.8 1.5 2.8 3 2.8 1 0 1.7-.4 2.3-1h.4c.3 0 .5.1.5.4 0 .2 0 .3-.2.4-.8.8-1.7 1.3-3.1 1.3zm2.4-4.8c0-1.5-1-2.8-2.6-2.8-1.4 0-2.5 1.2-2.7 2.8h5.3z"/>
					<path class="letter" d="M152.6 131.7c0-.4.2-.7.6-.7.3 0 .6.3.6.7v10.5c0 .4-.3.7-.6.7s-.6-.3-.6-.7v-10.5z"/>
					<path class="letter" d="M156.8 131.7c0-.4.2-.7.6-.7.3 0 .6.3.6.7v10.5c0 .4-.2.7-.6.7s-.6-.3-.6-.7v-10.5z"/>
					<path class="letter" d="M160.4 142l4.5-10c.2-.3.4-.5.8-.5h.1c.4 0 .6.2.8.5l4.5 10 .1.3c0 .3-.3.6-.6.6s-.5-.2-.6-.5l-1.2-2.6h-6.1l-1.2 2.6c-.1.3-.3.5-.6.5a.6.6 0 0 1-.6-.6v-.3zm8-3.3l-2.7-5.7-2.5 5.7h5.1z"/>
					<path class="letter" d="M173.4 140.6v-5h-.7a.6.6 0 0 1-.5-.5c0-.3.3-.6.5-.6h.7v-2c0-.3.3-.6.6-.6.4 0 .6.3.6.7v2h2.2c.3 0 .6.2.6.5s-.3.5-.6.5h-2.2v4.8c0 1 .6 1.4 1.4 1.4l.8-.1c.3 0 .5.2.5.5s-.1.4-.3.5c-.4.2-.8.2-1.3.2-1.3 0-2.3-.6-2.3-2.3z"/>
					<path class="letter" d="M179.4 132c0-.5.4-.7.8-.7s.7.2.7.6v.2c0 .4-.3.7-.7.7-.4 0-.8-.3-.8-.7v-.2z"/>
					<path class="letter" d="M179.6 135c0-.3.2-.6.6-.6.3 0 .6.3.6.7v7.1c0 .4-.3.7-.6.7s-.6-.3-.6-.7v-7.1z"/>
					<path class="letter" d="M183.9 132.2c0-.3.2-.6.6-.6h4.2c1.4 0 2.5.4 3.2 1.1.5.6.8 1.3.8 2.2 0 1.9-1.2 3-3 3.3l2.8 3.6.2.5c0 .3-.3.6-.6.6s-.5-.2-.6-.4l-3.2-4h-3.2v3.7c0 .4-.3.7-.6.7a.6.6 0 0 1-.6-.7v-10zm4.7 5.1c1.6 0 2.8-.9 2.8-2.3s-1-2.2-2.8-2.2H185v4.5h3.5z"/>
					<path class="letter" d="M195.3 138.1v-6c0-.3.2-.6.6-.6.3 0 .6.3.6.6v6c0 2.3 1.3 3.7 3.4 3.7 2.1 0 3.4-1.2 3.4-3.7v-6c0-.3.3-.6.7-.6.3 0 .6.3.6.6v6c0 3.2-1.9 4.9-4.7 4.9-2.8 0-4.6-1.7-4.6-4.9z"/>
					<path class="letter" d="M207.6 132.2c0-.4.3-.7.6-.7h.2c.3 0 .4.2.6.4l6.8 8.7V132c0-.3.3-.6.6-.6.4 0 .6.3.6.6v10.1c0 .4-.2.6-.5.6-.4 0-.6-.1-.7-.3l-7-9v8.7c0 .4-.3.7-.6.7a.6.6 0 0 1-.6-.7v-10z"/>
				</g>
			</svg>

		</div>
	</div>

</body>
</html>

CSS forráskód


body {
	margin: 0;
	background: #000 url('bg.jpg');
	background-size: cover
}
.page-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh
}
.wrapper {
	flex: 1;
	max-width: 500px
}

JS forráskód


function logoAnimate(){
	var tl = new TimelineMax();
	
	tl
	.fromTo("#letter-w", 1, { x:-400, opacity: 0 }, { x:0, opacity: 1, ease: Back.easeOut })
	.fromTo("#letter-a", 1, { x:400, opacity: 0 }, { x:0, opacity: 1, ease: Back.easeOut })
	.fromTo("#gradient-blue", .5, { opacity: 0 }, { opacity: 1 })
	.fromTo("#gradient-green", .5, { opacity: 0 }, { opacity: 1 })
	.staggerFrom(".letter", .5, {
		opacity: 0,
		cycle: {
			y:[-100,100]
		}
	},.1)
	.fromTo("#logo", 3, { rotation: 0 }, { rotation: 360, ease: Expo.easeOut },"+=5")
}

window.onload = function() {
	logoAnimate();
}

4 hozzászólás

  1. 2018. május 25. péntek - 17:57

    Laravel rendszert valamikor bemutatsz ha ismered?

    Válasz
    • 2018. május 26. szombat - 08:07

      Nem foglalkozom programozással.

  2. 2018. május 21. hétfő - 13:19

    Szia.
    Jó lett a videó nagyon.
    Egy olyan kérdésem lenne hogy ezt az animációt rá lehet tenni minden elemre? PL div-re. Illetve hogy csak akkor hajtódjon vége ha a felhasználó pl oda görget. Lejebb lévő szövegeknél.

    Válasz
    • 2018. május 21. hétfő - 13:28

      Bármilyen elemet tudsz ezzel animálni amire lehet class-t vagy ID-t tenni.
      Le tudod kérdezni egy adott elem pozícióját scrollozás közben: http://jsfiddle.net/moagrius/wN7ah/

Hozzászólás

  Adatvédelmi nyilatkozat

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • Az Axure használata

    A munkáltató biztosítja számodra a munkavégzéshez szükséges hardvereket és szoftvereket. Ha nem így van, akkor annál a cégnél nem szabad dolgozni....

  • Az Axure használata

    Köszi a választ! Annyit szeretnék még kérdezni, hogy ha olyan a munkahely hogy adobe szoftverekkel kell dolgozni mondjuk a saját gépemröl, akkor nekem...

  • Az Axure használata

    Próbafeladatot szoktak adni amit meg kell oldanod. Jobb esetben otthon, de nem egy olyan interjún voltam már, ahol leültettek egy géphez aztán ott hel...

  • Az Axure használata

    Hali. Azt szeretném kérdezni, hogy te mit tanácsolsz egy pályakezdö webdesignernek, ha el akar helyezkedni? Még nem dolgoztam korábban sosem webdesign...

  • A Bootstrap 4 grid használata

    Azt használsz ami tetszik. A CSS reset cuccok többsége lassan 10 éves, ma már nem nagyon van rájuk szükség. Bootstrap akkor kell, ha az adott projekth...

  • A Bootstrap 4 grid használata

    Szia! Nem rég kezdtem tanulni, kis segítséggel õssze tudok rakni egy oldalt Html+css a többivel még most ismerkednek. Nem nagyon vagyok vele tisztába ...

  • A villanyszerelés örömei panelben

    Nem, én B-t raktam mindenhova és most már ötödik éve nincs vele gondom....

  • A villanyszerelés örömei panelben

    Szia Jövő héten kezdek bele, egy ugyan ilyen projectbe. Még mindig tartod azt az állítást, hogy jó a C karakterisztikájú kismegszakító? És mé...

  • ActionScript 3 eseménykezelés

    Sima CSS animációt....

  • ActionScript 3 eseménykezelés

    Helló! Kiváló a "Banner mutációk" -ról szóló videód. A legnagyobb erénye számomra, hogy a hatékony munkavégzést is bemutattad. Amiért a flash témakor...

  • Egyszerű tükröződés készítése Photoshopban

    Koszi:)...

  • Bootstrap carousel

    Nem találkoztam még ilyennel, ezt a két linket találtam hozzá: https://stackoverflow.com/questions/16244306/single-picture-displaying-upside-down-in-b...