In this tutorial, we're going to explore how to create captivating SVG animations using the TweenMax library and the MorphSVGPlugin. We'll walk through the process of morphing between different SVG shapes to create a visually appealing animation. The example we'll cover involves transforming a simple set of shapes representing buildings into each other seamlessly.
Prerequisites
- Basic understanding of HTML, CSS, and JavaScript.
- Familiarity with SVG (Scalable Vector Graphics) syntax.
Setting Up the HTML and CSS
Start by creating an HTML file that includes link to the TweenMax and MorphSVGPlugin libraries and the SVG markup for the initial set of shapes. You can place this code within the <body> of your HTML file. Additionally, set up some basic CSS rules to style and position the SVG appropriately:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>SVG Morph Animation</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 800 600" class="svg">
<!-- SVG paths representing buildings -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 800 600" class="svg">
<path id="hamra" fill="#22B573" d="M370.599,502.002c0,0-13.599-110.921-13.599-152.335S357,148,357,148l53-18.44V68l26,34.192V502
l-63.401-0.818L370.599,502.002z"/>
<path id="ktowerbig" fill="#FC3030" d="M470.565,337.748c0-33.663-22.392-62.081-53.088-71.212l-2.652-24.19
c16.421-7.166,27.903-23.537,27.903-42.599c0-22.62-16.166-41.455-37.573-45.605l-8.895-81.146l-8.895,81.147
c-21.404,4.152-37.566,22.986-37.566,45.604c0,19.06,11.48,35.43,27.899,42.597l-2.652,24.193
c-30.694,9.133-53.083,37.549-53.083,71.21c0,27.914,15.402,52.47,38.163,65.167L349.292,502h93.943L432.4,402.916
C455.163,390.219,470.565,365.663,470.565,337.748z"/>
<path id="ktowersmall" fill="#4D4D4D" d="M467.98,257.748c0-35.339-25.566-64.686-59.207-70.607L396.26,72.997l-12.512,114.145
c-33.638,5.923-59.201,35.27-59.201,70.606c0,29.859,18.251,55.697,44.202,66.49L349.292,502h93.943l-19.46-177.762
C449.729,313.446,467.98,287.607,467.98,257.748z"/>
<polygon id="ltower" fill="#3FA9F5" points="436.899,358 443.235,341.963 437.494,328 422.645,328 418.783,287.318 437,279
437,225.424 408.727,216.38 400.029,72.991 396.208,72.997 392.292,72.991 383.044,216.38 354,225.424 354,279 372.981,287.318
369.883,328 355.034,328 349.292,341.963 355.628,358 366.01,358 349.292,502 393.981,502 398.685,502 443.235,502 426.518,358 "/>
</svg>
<!-- Add your path elements here -->
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<!-- get the js plugin from https://gist.github.com/rikvermeer/3a9ad7a7ee3f3f917673dfb06c9f800a -->
</body>
</html>
In the CSS file, we'll apply some basic styles to the SVG and hide all shapes except the first one:
html, body {
margin: 0;
padding: 0;
height: 100vh;
overflow: hidden;
}
body {
text-align: center;
padding: 20px;
}
.svg {
width: 100%;
height: 100vh;
margin: 0 auto;
display: block;
}
/* Hide all shapes except the first one */
#ktowerbig, #ktowersmall, #ltower {
visibility: hidden;
}
Creating the SVG Morph Animation
Now, let's set up the JavaScript to handle the animation using TweenMax and MorphSVGPlugin. Create a JavaScript file named script.js and add the following code:
// Select the starting shape element
var start = document.getElementById("hamra");
// Duration for each morphing animation
var eachDuration = 1.5;
// Create a timeline for the animation with repeat
var morph = new TimelineMax({ repeat: -1 });
// Define the sequence of morphing animations
morph
.to(start, eachDuration, { morphSVG: "#ktowerbig", fill: "#FC3030", ease: Elastic.easeInOut })
.to(start, eachDuration, { morphSVG: "#ktowersmall", fill: "#4D4D4D", ease: Elastic.easeInOut })
.to(start, eachDuration, { morphSVG: "#ltower", fill: "#3FA9F5", ease: Elastic.easeInOut })
.to(start, eachDuration, { morphSVG: start, fill: "#22B573", ease: Elastic.easeInOut });
Here is the codepen
In this tutorial, we've learned how to create an engaging SVG animation using the TweenMax library and the MorphSVGPlugin. By combining the power of JavaScript, SVG, and animation libraries, you can create impressive visual effects that enhance user experiences on the web. Feel free to experiment with different SVG shapes, colors, and durations to customize the animation to your liking.
Top comments (0)