Interactive Three.js Animation
About this project
This project is an animated SVG illustration of Buffy the Vampire Slayer, part of a "31 Creepy SVGs" series (project 13). The character is built from layered SVG artwork including a static body, hand states, individual finger shapes, and a spinning wooden stake. GSAP and the MorphSVGPlugin drive the animation, morphing hand shapes between open and closed states while a stake spins continuously in a looping sequence. The design uses a purple radial gradient background with alternate color themes prepped for other characters in the series (ghost and spider variants are already styled in the CSS).
What you will learn
Working through this project teaches you how to animate complex, multi-part SVG illustrations using GSAP's TimelineMax and MorphSVGPlugin. You will learn how MorphSVG converts shapes like polygons, ellipses, and circles into paths so they can smoothly morph between two states, and how to orchestrate several independent timelines (body, shadow, and five separate fingers) so they stay in sync using shared delays and repeat cycles. You will also pick up CSS layering techniques, using z-index and keyframe animations together to fake a spinning object crossing in front of and behind other elements, which is a clever workaround for a limitation in how CSS handles 3D-style rotation with 2D layers. Beyond the animation mechanics, you will see how to structure a single SVG file with multiple named paths representing different states of the same object, a pattern that is reusable for any character rig with swappable poses.
Understand the code
Read a plain-language overview or a file-by-file breakdown. Ask questions about the project below the overview.
This web project displays an animated illustration of "Buffy" (likely Buffy the Vampire Slayer), featuring a character whose hand repeatedly clenches and unclenches, holding a spinning stake. The core purpose is to showcase smooth SVG animation, specifically shape morphing, to bring a static illustration to life with a subtle, looping motion.
The project is built using standard web technologies: HTML, CSS, and JavaScript. The HTML file acts as the container, embedding multiple SVG images. These SVGs are layered on top of each other, with different SVGs representing the character's body and individual fingers in a "closed" state and an "open" state.
<svg class="buffy-layer" id="body-hand-closed" ...>
<path id="body-01" class="st0" d="M145.7,327.4c0,0,31.5,64,66,82c0,0,18-0.5,37.5-60.8s19.5-107.7,98-92.2c0,0,4-36-14.5-61 ..."/>
</svg>
<svg class="buffy-layer" id="body-hand-open" ...>
<path id="body-02" class="st0" d="M130.2,347.9c0,0,47,43.5,81.5,61.5c0,0,18-0.5,37.5-60.8s19.5-107.7,98-92.2c0,0,4-36-14.5-61 ..."/>
</svg>These HTML snippets show two SVG elements, each containing a path (#body-01 and #body-02) that represent the character's body with either a closed or open hand, respectively.
CSS is used to style the background, position the SVG layers, and initially hide the "open hand" SVG elements. It also defines a continuous spinning animation for the stake, which is a separate SVG layer, using standard CSS keyframe animations.
#body-hand-open,
#fingers-open {
display: none;
}This CSS rule ensures that the SVG layers showing the open hand are hidden by default, allowing the JavaScript to control their visibility through morphing.
#stake {
animation: spinStake 4.5s linear infinite;
}This CSS snippet applies a spinStake animation to the stake element, making it rotate continuously.
The core animation logic resides in JavaScript, utilizing the GSAP (GreenSock Animation Platform) library and its MorphSVG plugin. GSAP creates TimelineMax animations that smoothly transition the SVG paths of the "closed hand" elements into the shapes of their "open hand" counterparts, and then back again, creating the clenching and unclenching effect, which repeats indefinitely.
gsap.registerPlugin(MorphSVGPlugin);
// ...
var body = new TimelineMax({repeat:-1, repeatDelay:0});
body
.to('#body-01', 0.25, {morphSVG: {shape:'#body-02'}, ease:Power0.easeInOut, delay: 1.5})
.to('#body-01', 0.25, {morphSVG: {shape:'#body-01'}, ease:Power0.easeInOut, delay: 2.5});This JavaScript code registers the MorphSVG plugin and then defines a TimelineMax animation. It targets the #body-01 path and morphs its shape to #body-02 (open hand) and then back to #body-01 (closed hand), repeating this sequence to create the hand movement.
Ask about this project
Have a question about how this project works? Ask below and get an answer based on the project code.
Code Breakdown
Structured technical breakdown for beginners.
No breakdown yet. Generate one to see a file-by-file explanation.
Comments
No comments yet. Sign in to leave a comment.
Sign in to leave a comment.