console
// nothing makes sense here :) values handpicked by trial and error
(() => {
gsap.registerPlugin(MotionPathPlugin);
const contraction = () => gsap.timeline()
.to('#forearm-left', {
keyframes: [{
duration: 0.5,
x: 5,
y: -80,
}, {
duration: 0.25,
x: 15,
y: -90,
}, {
duration: 0.25,
x: 16,
y: -98,
}
]
}, 0)
.to('#arm-left', {
duration: 1,
rotateZ: -40,
}, 0)
const riff = () => gsap.timeline()
.to('#forearm-left', {
keyframes: [{
duration: 0.05,
x: -45,
y: -55
}, {
duration: 0.1,
x: -120,
y: -68
}
],
}, 0)
.to('#arm-left', {
duration: 0.2,
rotateZ: 30,
}, 0)
.to('.shock.one', {
duration: 0.5,
keyframes: [
{opacity: 1, scale: 1.5,},
{opacity: 0, scale: 2,}
]
}, 0.1)
.to('.scene', {
duration: 0.1,
motionPath: [{x: 10, rotationZ: 1,}, {x: -10, rotationZ: -1,}, {x: 0, rotationZ: 0,},],
}, 0.1)
.to('feGaussianBlur', {
duration: 0.1,
attr: {
stdDeviation: 1,
},
}, 0.1)
.to('feGaussianBlur', {
duration: 0.1,
attr: {
stdDeviation: 0,
},
}, 0.2)
const thunderOne = () => gsap.timeline()
.to('.thunder.one .bg', {
duration: 1,
x: '100%',
}, 0)
const contractionTwo = () => gsap.timeline()
.to('#forearm-left', {
keyframes: [{
duration: 0.1,
x: -25,
y: -70,
}, {
duration: 0.15,
x: 16,
y: -98,
}
]
}, 0)
.to('#arm-left', {
duration: 0.3,
rotateZ: -40,
}, 0)
const riffTwo = () => gsap.timeline()
.to('#forearm-left', {
keyframes: [{
duration: 0.03,
x: -50,
y: -55
}, {
duration: 0.15,
x: -125,
y: -68
}
],
}, 0)
.to('#arm-left', {
duration: 0.2,
rotateZ: 30,
}, 0)
.to('.shock.two', {
duration: 0.5,
keyframes: [
{opacity: 1, scale: 1.5,},
{opacity: 0, scale: 2,}
]
}, 0.1)
.to('.scene', {
duration: 0.3,
motionPath: [{x: 15, rotationZ: 1}, {x: -15, rotationZ: -1}, {x: 0, rotationZ: 0}],
}, 0.1)
.to('feGaussianBlur', {
duration: 0.1,
attr: {
stdDeviation: 1,
},
}, 0.1)
.to('feGaussianBlur', {
duration: 0.1,
attr: {
stdDeviation: 0,
},
}, 0.2)
const thunderTwo = () => gsap.timeline()
.to('.thunder.two .bg', {
duration: 1,
x: '100%',
}, 0)
const contractionRight = () => gsap.timeline()
.to('#hand-right', {
duration: 0.5,
x: 40,
y: 10,
}, 0)
.to('#forearm-right', {
duration: 0.5,
x: 408,
y: 120,
}, 0)
.to('#arm-right', {
duration: 0.5,
x: '+=20',
}, 0)
.to('#guitar', {
duration: 0.5,
x: -255,
y: 0,
rotationZ: 15,
}, 0)
const zoom = () => gsap.timeline()
.to('#slash, .dust-container', {
duration: 1.5,
z: 20,
}, 0)
const restart = () => gsap.timeline()
.to('#hand-right', {
duration: 1.5,
x: 0,
y: 0,
}, 0)
.to('#arm-right', {
duration: 1.5,
x: '-=20',
}, 0)
.to('#forearm-right', {
duration: 1.5,
x: 380,
y: 110,
}, 0)
.to('#arm-left', {
duration: 1.5,
rotate: 0,
}, 0)
.to('#forearm-left', {
duration: 1.5,
x: -58,
y: -60,
}, 0)
.to('#guitar', {
duration: 1.5,
x: -285,
y: 47,
rotationZ: 0,
}, 0)
.to('#slash, .dust-container', {
duration: 1.5,
z: -10,
}, 0)
gsap.timeline({
repeat: -1,
})
.add(contraction())
.add(contractionRight())
.add(riff(), 1)
.add(thunderOne(), 1.1)
.add(contractionTwo(), 1.2)
.add(riffTwo(), 1.5)
.add(thunderTwo(), 1.6)
.add(zoom(), 1)
.add(restart())
gsap.to('.hair', {
repeat: -1,
yoyo: true,
duration: 0.1,
x: 5,
y: -5,
})
const dustParticles = document.getElementById('dust-particles');
function spawn() {
const newParticle = document.createElement('div');
newParticle.classList.add('dust');
gsap.to(newParticle, {
ease: 'linear',
duration: 'random(1, 3)',
scale: 'random(5, 10)',
y: 'random(-10, -100)',
left: '100%',
onComplete: () => {
dustParticles.removeChild(newParticle);
}
});
dustParticles.appendChild(newParticle);
gsap.delayedCall(0.1, spawn);
}
spawn();
})();
<div class="scene">
<div class="slash-container">
<div class="shock one"></div>
<div class="shock two"></div>
<div id="dust-particles" class="dust-container"></div>
<svg id="slash" viewBox="0 0 450 500">
<g transform="translate(-62,-11)">
<g id="right-leg">
<rect transform="rotate(-90)" x="-455" y="130" width="35" height="150" rx="20" ry="20" fill="#525457" style="paint-order:fill markers stroke"/>
<rect transform="rotate(46)" x="396" y="70" width="35" height="150" rx="20" ry="20" fill="#525457" style="paint-order:fill markers stroke"/>
<path d="m208 418v39l62-0.4s22 15 40-6l-46-34z" fill="#363839" style="paint-order:fill markers stroke"/>
</g>
<g id="left-leg">
<rect transform="rotate(46)" x="446" y="51" width="35" height="150" rx="20" ry="20" fill="#525457" style="paint-order:fill markers stroke"/>
<rect transform="rotate(-90)" x="-477" y="177" width="35" height="150" rx="20" ry="20" fill="#525457" style="paint-order:fill markers stroke"/>
<path d="m253 440v39l62-0.4s22 15 40-6l-46-34z" fill="#363839" style="paint-order:fill markers stroke"/>
</g>
<rect id="arm-right" transform="rotate(49)" x="320" y="-105" width="30" height="135" rx="20" ry="20" fill="#f2f2f2" style="paint-order:fill markers stroke"/>
<rect id="forearm-right" transform="rotate(-84)" x="-248" y="153" width="30" height="111" rx="20" ry="18" fill="#e1b78a" style="paint-order:fill markers stroke"/>
<g id="body" transform="translate(-221,34)">
<rect transform="rotate(29)" x="523" y="-148" width="109" height="220" rx="50" ry="50" fill="#525457" style="paint-order:fill markers stroke"/>
<path d="m547 144c-18-0.3-35 9-44 26l-37 67c-10 23-2 51 21 64l9 5c24 14 55 5 68-19l37-67c10-23 2-51-21-64l-9-5c-8-4-16-6-24-6z" fill="#f2f2f2" style="paint-order:fill markers stroke"/>
<path d="m533 145s-3 16 15 24c19 9 40 5 48-4s-64-21-64-21z" fill="#9ba0a3" style="paint-order:fill markers stroke"/>
</g>
<g id="guitar" transform="translate(-285,47)">
<g transform="translate(297,-23)" fill="#fff">
<circle cx="86" cy="157" r="4" style="paint-order:fill markers stroke"/>
<circle cx="96" cy="163" r="4" style="paint-order:fill markers stroke"/>
<circle cx="105" cy="169" r="4" style="paint-order:fill markers stroke"/>
<circle cx="85" cy="202" r="4" style="paint-order:fill markers stroke"/>
<circle cx="76" cy="196" r="4" style="paint-order:fill markers stroke"/>
<circle cx="66" cy="190" r="4" style="paint-order:fill markers stroke"/>
</g>
<path d="m521 200a23 23 3 0 0-24 21 23 23 3 0 0 0.5 6c0.04 5-0.6 17-9 25a17 16 3 0 0-9 14 17 16 3 0 0 16 17 17 16 3 0 0 2-9e-3c3e-3 2e-3 0.06 0.05 0.06 0.05s0.3-0.05 0.4-0.09a17 16 3 0 0 2-0.3c5-0.5 15-0.5 19 10a56 54 3 0 0 51 37 56 54 3 0 0 58-52 56 54 3 0 0-53-57 56 54 3 0 0-17 2c-3 0.2-9-0.6-15-9a23 23 3 0 0-21-15 23 23 3 0 0-0.1-5e-3z" fill="#6b2f2f" style="paint-order:fill markers stroke"/>
<path d="m520 193c-12-0.6-24 9-25 22-0.1 2 0.07 4 0.5 6 0.04 5-0.6 17-9 25-6 3-9 8-9 14-0.5 9 7 16 16 17 0.7 0.03 1 0.03 2-9e-3 3e-3 2e-3 0.06 0.05 0.06 0.05s0.3-0.05 0.4-0.09c0.7-0.06 1-0.2 2-0.3 5-0.5 15-0.5 19 10 7 21 28 36 51 37 31 1 57-22 58-52 2-30-22-55-53-57-6-0.2-11 0.5-17 2-3 0.2-9-0.6-15-9-7-14-18-14-21-14z" fill="#8f4140" style="paint-order:fill markers stroke"/>
<rect transform="rotate(32)" x="590" y="-88" width="21" height="38" rx="4" ry="5" fill="#efeff0" style="paint-order:fill markers stroke"/>
<path d="m375 135c-2 0.06-3 0.9-4 2l-11 17c-1 2-0.9 6 1 7l26 16c2 1 5 0.3 6-1l119 75c2 1 5 0.8 7-2l6-9c1-2 0.8-5-2-7l-119-75 0.02-0.03c1-2 0.7-5-2-7l-26-16c-0.9-0.5-2-0.8-3-0.7z" fill="#f0e0c9" style="paint-order:fill markers stroke"/>
<rect transform="rotate(32)" x="563" y="-85" width="10" height="35" rx="5" ry="5" fill="#efeff0" style="paint-order:fill markers stroke"/>
<rect transform="rotate(211)" x="-634" y="39" width="4" height="43" rx="2" ry="2" fill="#efeff0" style="paint-order:fill markers stroke"/>
</g>
<rect id="arm-left" x="360" y="208" width="30" height="135" rx="20" ry="20" fill="#f2f2f2" style="paint-order:fill markers stroke"/>
<g id="forearm-left" transform="translate(-58,-60)" fill="#e1b78a">
<rect transform="rotate(-84)" x="-356" y="375" width="30" height="111" rx="20" ry="18" style="paint-order:fill markers stroke"/>
<circle cx="340" cy="373" r="20" style="paint-order:fill markers stroke"/>
</g>
<ellipse class="hair" cx="303" cy="177" rx="26" ry="25" fill="#3d3e40" style="paint-order:fill markers stroke"/>
<ellipse cx="348" cy="155" rx="46" ry="47" fill="#e1b78a" style="paint-order:fill markers stroke"/>
<g fill="#3d3e40">
<circle cx="401" cy="142" r="19" style="paint-order:fill markers stroke"/>
<circle class="hair" cx="310" cy="125" r="19" style="paint-order:fill markers stroke"/>
<circle class="hair" cx="295" cy="152" r="19" style="paint-order:fill markers stroke"/>
<ellipse class="hair" cx="393" cy="217" rx="33" ry="31" style="paint-order:fill markers stroke"/>
<circle class="hair" cx="424" cy="219" r="19" style="paint-order:fill markers stroke"/>
<ellipse class="hair" cx="426" cy="181" rx="26" ry="29" style="paint-order:fill markers stroke"/>
<ellipse cx="387" cy="115" rx="30" ry="26" style="paint-order:fill markers stroke"/>
<ellipse cx="389" cy="161" rx="21" ry="22" style="paint-order:fill markers stroke"/>
<ellipse cx="337" cy="99" rx="24" ry="23" style="paint-order:fill markers stroke"/>
<circle cx="416" cy="149" r="19" style="paint-order:fill markers stroke"/>
<circle class="hair" cx="384" cy="184" r="23" style="paint-order:fill markers stroke"/>
<ellipse cx="366" cy="87" rx="24" ry="23" style="paint-order:fill markers stroke"/>
</g>
<g transform="translate(120,-42)">
<g transform="translate(-182,-23)" stroke="#9ba0a3" stroke-dashoffset="232" stroke-linecap="square" stroke-linejoin="round" stroke-width="3">
<path d="m413 201s2-9 11-6c9 4 23 9 23 9s6 2 3 9-11 19-25 14c-14-4-16-14-12-27z" fill="#616469" style="paint-order:fill markers stroke"/>
<path d="m365 185s2-9 11-6c9 4 23 9 23 9s6 2 3 9-11 19-25 14c-14-4-16-14-12-27z" fill="#616469" style="paint-order:fill markers stroke"/>
<path d="m403 196s6-2 9 4" fill="none" style="paint-order:fill markers stroke"/>
<path d="m401 189 17 5" fill="none" style="paint-order:fill markers stroke"/>
</g>
<path d="m214 197s-10 0.3-10-5c0.3-6 7-2 11-3" fill="#e1b78a" stroke="#b39676" stroke-dashoffset="232" stroke-linecap="square" stroke-linejoin="round" stroke-width="3" style="paint-order:fill markers stroke"/>
<g transform="translate(-4 -.4)">
<circle cx="210" cy="211" r="4" fill="#b38276" style="paint-order:fill markers stroke"/>
<rect transform="matrix(1 -.002 -.008 1 0 0)" x="186" y="209" width="28" height="5" ry="4" fill="#f0f1f2" style="paint-order:fill markers stroke"/>
<path d="m203 208c1 0.3 2 1 2 3-0.02 2-0.7 2-2 3-0.03 8e-3 -0.06 0.01-0.09 0.01-0.08 0.01-0.1 0.03-0.2 0.03-0.02 6e-4 -0.03 5e-3 -0.05 5e-3h7c2 0 3-1 3-3s-1-3-4-3z" fill="#c6a47a" style="paint-order:fill markers stroke"/>
<circle transform="matrix(1 -.06 .005 1 0 0)" cx="186" cy="222" r="2" fill="#a66d6d" stroke="#5d6065" stroke-dashoffset="232" stroke-linecap="square" stroke-linejoin="round" stroke-width=".9" style="paint-order:fill markers stroke"/>
</g>
</g>
<path d="m323 85 23-42s13-16 44-3c32 12 40 33 38 39l-15 45s-32-41-90-39z" fill="#5d6065" style="paint-order:fill markers stroke"/>
<g fill="#918d86" stroke="#a9a395" stroke-dashoffset="232" stroke-linecap="square" stroke-linejoin="round" stroke-width="3">
<circle cx="336" cy="73" r="5" style="paint-order:fill markers stroke"/>
<ellipse transform="rotate(6)" cx="359" cy="39" rx="7" ry="6" style="paint-order:fill markers stroke"/>
<ellipse transform="matrix(.9 .4 -.5 .9 0 0)" cx="374" cy="-75" rx="9" ry="6" style="paint-order:fill markers stroke"/>
<circle cx="411" cy="104" r="5" style="paint-order:fill markers stroke"/>
<ellipse transform="rotate(29)" cx="390" cy="-111" rx="9" ry="6" style="paint-order:fill markers stroke"/>
</g>
<path d="m374 86c-33-13-64-12-69 0.8-2 6-0.9 11 8 20-0.6-2 5-11 17-9s19 4 33 8c10 3 18 7 34 18 8 7 8 18 5 22 15 0.6 20-6 23-12 5-13-18-34-51-47z" fill="#7b8285" stroke="#5d6065" stroke-dashoffset="232" stroke-linecap="square" stroke-linejoin="round" stroke-width="3" style="paint-order:fill markers stroke"/>
<circle id="hand-right" cx="132" cy="243" r="20" fill="#e1b78a" style="paint-order:fill markers stroke"/>
</g>
</svg>
</div>
<div class="thunder-container">
<div class="thunder one"><div class="bg"></div></div>
<div class="thunder one"><div class="bg"></div></div>
<div class="thunder one"><div class="bg"></div></div>
<div class="thunder one"><div class="bg"></div></div>
</div>
<div class="thunder-container">
<div class="thunder two"><div class="bg"></div></div>
<div class="thunder two"><div class="bg"></div></div>
<div class="thunder two"><div class="bg"></div></div>
<div class="thunder two"><div class="bg"></div></div>
</div>
<svg width="0" height="0">
<defs>
<filter id="turbulence">
<feTurbulence baseFrequency="0.009" numOctaves="3" result="TURBULENCE" />
<feDisplacementMap in="SourceGraphic" in2="TURBULENCE" scale="150" />
</filter>
<filter id="wave">
<feTurbulence baseFrequency="0.04" numOctaves="1" result="TURBULENCE" />
<feDisplacementMap in="SourceGraphic" in2="TURBULENCE" scale="10" />
</filter>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="0" />
</filter>
</defs>
</svg>
</div>
html, body, .scene {
margin: 0;
height: 100%;
background-color: lightcoral;
background-image: linear-gradient(
to bottom,
lightskyblue 70%,
lightgray 70%,
lightgray 71%,
grey 71%
);
overflow: hidden;
filter: url(#blur);
}
.slash-container {
width: 100%;
height: 100%;
position: absolute;
perspective: 100px;
}
#slash {
width: 400px;
bottom: 10%;
left: 50%;
transform: translate3d(-50%, 0, -10px);
position: absolute;
}
.dust-container {
width: 70%;
height: 100%;
bottom: calc(10% + 30px);
left: calc(50% + 40px);
transform: translateZ(-10px);
position: absolute;
overflow: hidden;
}
.dust {
width: 50px;
height: 50px;
border-radius: 50%;
left: 0;
bottom: -10px;
position: absolute;
background-color: lightgrey;
transform: scale(1);
}
.shock {
width: 400px;
height: 400px;
bottom: 15%;
left: 53%;
position: absolute;
border: 3px solid rgb(254, 255, 222);
border-radius: 50%;
transform: translate(-50%, 0);
opacity: 0;
filter: url(#wave);
}
.thunder {
width: 100%;
height: 15px;
padding: 50px;
position: absolute;
filter: url(#turbulence);
overflow: hidden;
}
.thunder .bg {
width: 100%;
height: 100%;
background-color: rgb(143, 244, 255);
transform: translateX(-110%);
}
.thunder.one:nth-child(1) {
top: 65%;
left: 40%;
transform: rotateZ(-135deg);
transform-origin: top left;
}
.thunder.one:nth-child(2) {
top: 50%;
left: 55%;
transform: rotateZ(-45deg);
transform-origin: top left;
}
.thunder.one:nth-child(3) {
top: 80%;
left: 55%;
transform: rotateZ(145deg);
transform-origin: top left;
}
.thunder.one:nth-child(4) {
top: 70%;
left: 60%;
transform: rotateZ(35deg);
transform-origin: top left;
}
.thunder.two:nth-child(1) {
top: 50%;
left: 45%;
transform: rotateZ(-120deg);
transform-origin: top left;
}
.thunder.two:nth-child(2) {
top: 60%;
left: 55%;
transform: rotateZ(-20deg);
transform-origin: top left;
}
.thunder.two:nth-child(3) {
top: 75%;
left: 60%;
transform: rotateZ(80deg);
transform-origin: top left;
}
.thunder.two:nth-child(4) {
top: 75%;
left: 45%;
transform: rotateZ(-200deg);
transform-origin: top left;
}