Skip to content

Instantly share code, notes, and snippets.

@MboaAbel

MboaAbel/animated-hero-header-svg-gsap.markdown

Created July 5, 2022 15:32
Show Gist options
  • Save MboaAbel/7d754403b8982e8442d0cac00fd997af to your computer and use it in GitHub Desktop.
Save MboaAbel/7d754403b8982e8442d0cac00fd997af to your computer and use it in GitHub Desktop.
Download ZIP
Animated Hero Header [SVG + GSAP]
Raw
index.html
<section class='scene'>
<div class='overlay'></div>
<svg viewbox="408 612">
<defs>
<clipPath id='leaf' clipPathUnits='objectBoundingBox'>
<path transform='scale(0.0025, 0.0016)' d='M 195.00,194.00
C 189.37,201.73 189.29,212.61 184.11,220.74
184.11,220.74 167.98,239.53 167.98,239.53
162.69,245.03 158.62,244.91 158.00,254.00
158.00,254.00 147.00,261.00 147.00,261.00
147.00,261.00 145.00,282.00 145.00,282.00
145.00,282.00 143.00,281.00 143.00,281.00
143.00,281.00 142.00,282.00 142.00,282.00
142.95,292.74 140.19,291.05 139.55,296.13
138.86,298.67 139.61,301.24 139.55,303.75
140.59,314.72 135.76,319.35 144.00,330.00
140.38,335.96 146.60,343.20 148.42,349.00
151.43,358.56 159.62,365.97 166.99,372.32
166.99,372.32 176.04,381.15 176.04,381.15
178.06,382.56 180.71,383.60 183.00,384.54
192.37,388.36 196.67,387.33 205.00,382.00
205.00,382.00 203.00,404.00 203.00,404.00
207.95,400.69 207.61,388.52 207.00,383.00
212.11,387.74 220.73,392.35 227.99,389.77
231.17,388.63 232.63,386.41 235.17,385.20
235.17,385.20 240.99,383.20 240.99,383.20
244.35,381.47 250.47,375.19 252.52,371.96
260.69,359.08 263.14,350.58 266.29,336.00
267.96,328.23 268.77,330.45 268.61,321.00
268.61,321.00 268.61,302.59 268.61,302.59
268.19,298.61 264.50,293.13 264.00,284.00
264.00,284.00 249.82,261.00 249.82,261.00
249.82,261.00 237.70,246.39 237.70,246.39
237.70,246.39 231.05,242.19 231.05,242.19
231.05,242.19 219.22,231.56 219.22,231.56
219.22,231.56 204.73,213.07 204.73,213.07
204.73,213.07 199.63,204.00 199.63,204.00
199.63,204.00 195.00,194.00 195.00,194.00 Z' />
</clipPath>
</defs>
</svg>
<div class='leaf one'></div>
<div class='leaf two'></div>
<div class='leaf three'></div>
<div class='leaf four '></div>
<div class='leaf five'></div>
<div class='leaf six'></div>
<div class='leaf seven'></div>
<div class='leaf eight'></div>
<div class='leaf nine'></div>
<div class='leaf ten'></div>
<div class='leaf eleven'></div>
<div class='leaf twelve'></div>
<svg viewbox='0 0 596 419'>
<defs>
<path id="upper-tree" d="M 0.00,0.00
C 0.00,0.00 0.00,419.00 0.00,419.00
0.00,419.00 596.00,419.00 596.00,419.00
596.00,419.00 596.00,0.00 596.00,0.00
596.00,0.00 84.00,0.00 84.00,0.00
85.27,15.14 98.19,28.19 107.83,39.00
107.83,39.00 126.17,63.00 126.17,63.00
131.92,69.43 137.86,73.48 145.00,78.14
157.89,86.56 163.92,90.84 173.80,103.00
175.80,105.45 181.32,110.70 181.11,113.74
180.63,120.41 172.01,122.31 167.00,124.00
148.95,130.12 144.84,135.15 124.00,135.96
109.45,136.53 98.60,129.54 89.17,119.00
89.17,119.00 78.83,106.18 78.83,106.18
78.83,106.18 68.00,97.82 68.00,97.82
62.22,92.74 48.34,77.41 44.48,71.00
44.48,71.00 40.22,62.00 40.22,62.00
40.22,62.00 37.07,55.00 37.07,55.00
35.09,46.67 48.12,45.78 46.65,38.23
45.67,33.17 38.31,36.99 33.56,30.87
31.38,28.06 31.23,24.38 30.73,21.00
29.33,11.52 27.73,9.87 29.00,0.00
29.00,0.00 0.00,0.00 0.00,0.00 Z" />
<path id='main-tree' d="M 111.00,412.00
C 111.00,412.00 131.00,410.21 131.00,410.21
136.89,410.54 137.00,412.14 148.00,412.00
159.27,411.85 160.57,407.29 166.00,406.00
169.70,401.77 174.41,400.05 175.94,396.91
177.77,393.12 174.23,389.62 175.14,383.00
175.84,377.96 178.96,376.16 181.04,372.00
181.04,372.00 183.39,366.28 183.39,366.28
183.39,366.28 191.20,355.00 191.20,355.00
197.03,345.10 205.98,329.69 213.52,321.28
218.83,315.36 224.91,312.47 227.45,309.67
230.34,306.48 233.61,297.28 234.38,293.00
235.17,288.62 233.27,284.68 239.00,284.00
238.12,290.81 241.85,291.62 247.00,294.95
250.62,297.30 254.76,301.54 258.01,302.86
262.49,304.66 269.70,303.85 273.78,310.10
273.78,310.10 281.35,326.00 281.35,326.00
283.74,329.96 294.26,340.99 298.04,343.96
306.06,350.24 321.37,353.80 327.10,361.17
332.52,368.15 331.54,371.52 333.95,378.00
333.95,378.00 337.40,386.00 337.40,386.00
338.46,389.21 338.43,393.79 341.31,395.86
345.39,398.80 358.68,399.66 364.00,400.08
364.00,400.08 400.00,405.46 400.00,405.46
408.76,407.25 412.60,412.73 418.98,413.66
424.44,414.45 425.53,410.68 423.26,406.42
421.12,402.42 412.93,396.84 409.00,394.23
406.13,392.33 400.05,387.92 397.00,387.31
397.00,387.31 383.00,388.00 383.00,388.00
379.54,388.01 374.29,388.39 371.17,387.10
371.17,387.10 366.83,384.85 366.83,384.85
363.59,383.58 363.04,384.39 359.58,382.01
355.41,379.15 351.88,375.66 349.79,371.00
347.83,366.65 348.08,361.14 343.00,360.00
344.59,349.56 333.26,340.01 325.00,335.38
320.18,332.67 315.58,332.04 310.21,327.32
305.11,322.83 308.61,318.18 304.30,312.04
300.97,307.30 297.50,307.60 292.44,301.96
286.18,294.97 272.91,276.89 266.00,273.00
266.75,266.84 262.56,264.64 258.01,261.34
251.74,256.80 253.29,256.66 248.82,252.30
246.58,250.12 243.25,248.27 242.05,245.33
239.70,239.60 241.20,234.13 240.59,230.00
240.15,227.10 238.38,223.75 238.26,220.00
238.26,220.00 239.08,211.00 239.08,211.00
239.08,211.00 239.08,200.00 239.08,200.00
239.08,200.00 239.08,181.34 239.08,181.34
239.68,176.11 242.74,175.24 242.98,168.00
243.13,163.61 241.70,153.35 240.66,149.00
239.77,145.27 238.00,142.79 239.68,138.91
243.53,129.98 250.56,127.99 259.00,125.58
259.00,125.58 273.00,121.50 273.00,121.50
281.35,119.53 289.01,118.45 297.00,114.82
303.53,111.85 313.10,104.66 317.47,99.00
317.47,99.00 324.49,87.33 324.49,87.33
327.97,83.87 331.59,86.81 334.69,85.39
337.67,84.02 337.00,78.76 337.00,76.00
323.82,76.00 310.02,75.17 297.00,77.32
297.00,77.32 288.00,79.54 288.00,79.54
282.22,80.58 280.72,79.23 273.00,81.75
267.90,83.41 254.34,88.39 250.01,90.80
246.11,92.97 243.26,96.48 239.00,98.03
239.00,98.03 217.00,99.91 217.00,99.91
217.00,99.91 210.00,99.11 210.00,99.11
210.00,99.11 205.00,99.11 205.00,99.11
200.83,98.61 195.23,93.01 192.44,89.91
184.63,81.24 180.65,72.74 170.00,66.31
154.52,56.95 158.76,58.75 146.83,47.28
146.83,47.28 139.37,40.57 139.37,40.57
132.17,32.94 121.54,17.75 120.82,7.00
120.82,7.00 120.82,0.00 120.82,0.00
120.82,0.00 11.00,0.00 11.00,0.00
9.35,0.00 5.84,-0.14 4.43,0.57
0.80,2.40 2.95,10.40 3.00,14.00
3.22,33.01 5.33,32.87 9.84,50.00
9.84,50.00 13.96,73.00 13.96,73.00
16.97,81.09 25.79,88.16 30.96,95.00
35.61,101.17 34.61,103.94 38.34,107.61
41.40,110.62 50.13,114.11 56.26,120.62
68.34,133.44 74.42,146.58 91.00,155.69
111.25,166.80 130.12,165.43 152.00,162.83
152.00,162.83 166.00,159.88 166.00,159.88
173.00,158.92 185.59,160.41 190.78,165.38
194.48,168.92 197.16,178.98 196.57,184.00
196.57,184.00 193.84,193.00 193.84,193.00
193.84,193.00 192.68,202.00 192.68,202.00
190.98,212.20 187.87,221.49 188.00,232.00
188.12,241.27 192.41,244.84 191.82,253.00
191.04,263.79 187.15,272.02 179.72,279.90
179.72,279.90 172.92,286.21 172.92,286.21
172.92,286.21 166.89,295.00 166.89,295.00
166.89,295.00 145.32,331.00 145.32,331.00
145.32,331.00 131.70,360.91 131.70,360.91
125.66,371.86 126.97,374.77 117.33,387.00
114.39,390.74 106.78,397.07 106.07,401.04
105.34,405.19 108.76,408.83 111.00,412.00 Z" />
</defs>
<g fill='transparent' stroke='black'>
<path class='slot' />
<path class='slot' />
<path class='slot' />
<path class='slot' />
<path class='slot' />
<path class='slot' />
<path class='slot' />
<path class='slot' />
<path class='slot' />
</g>
</svg>
<h1 class='neo'>NATURE</h1>
<h4 class='sub'>IS ON</h4>
<h2 class='move'>LIVE</h2>
</section>
Raw
script.js
scene = {
up: document.querySelector("#upper-tree"),
star: document.querySelector("#main-tree"),
mask: document.querySelector(".overlay"),
leaves: document.querySelectorAll(".leaf"),
title: document.querySelector(".neo"),
sub: document.querySelector(".sub"),
move: document.querySelector(".move"),
subWords: "",
tL: gsap.timeline(),
pathEls: document.querySelectorAll(".slot"),
emptySlots: Array.from(document.querySelectorAll(".slot")),
raw1: "",
raw2: "",
createRaw: () => {
let path1 = scene.up.getAttribute("d");
scene.raw1 = MotionPathPlugin.getRawPath(path1);
let path2 = scene.star.getAttribute("d");
scene.raw2 = MotionPathPlugin.getRawPath(path2);
},
applyToDom: (x, y) => {
scene.emptySlots[x].setAttribute("d", y);
gsap.set(scene.emptySlots[x], { drawSVG: 0 });
},
sliceUp: () => {
let preUp1 = MotionPathPlugin.sliceRawPath(scene.raw1, 0.858, 0.915);
let finalpath1 = MotionPathPlugin.rawPathToString(preUp1);
scene.applyToDom(0, finalpath1);
let preUp2 = MotionPathPlugin.sliceRawPath(scene.raw1, 0.95, 0.988);
let finalpath2 = MotionPathPlugin.rawPathToString(preUp2);
scene.applyToDom(1, finalpath2);
let preUp3 = MotionPathPlugin.sliceRawPath(scene.raw2, 0.77, 0.88);
let finalpath3 = MotionPathPlugin.rawPathToString(preUp3);
scene.applyToDom(2, finalpath3);
let preUp4 = MotionPathPlugin.sliceRawPath(scene.raw2, 0.94, 1);
let finalpath4 = MotionPathPlugin.rawPathToString(preUp4);
scene.applyToDom(3, finalpath4);
let preUp5 = MotionPathPlugin.sliceRawPath(scene.raw2, 0.07, 0.12);
let finalpath5 = MotionPathPlugin.rawPathToString(preUp5);
scene.applyToDom(4, finalpath5);
let preUp6 = MotionPathPlugin.sliceRawPath(scene.raw2, 0.235, 0.29);
let finalpath6 = MotionPathPlugin.rawPathToString(preUp6);
scene.applyToDom(5, finalpath6);
let preUp7 = MotionPathPlugin.sliceRawPath(scene.raw2, 0.33, 0.38);
let finalpath7 = MotionPathPlugin.rawPathToString(preUp7);
scene.applyToDom(6, finalpath7);
let preUp8 = MotionPathPlugin.sliceRawPath(scene.raw2, 0.42, 0.48);
let finalpath8 = MotionPathPlugin.rawPathToString(preUp8);
scene.applyToDom(7, finalpath8);
let preUp9 = MotionPathPlugin.sliceRawPath(scene.raw2, 0.56, 0.61);
let finalpath9 = MotionPathPlugin.rawPathToString(preUp9);
scene.applyToDom(8, finalpath9);
},
splitSub: () => {
let splitEl = new SplitText(scene.sub);
scene.subWords = splitEl.chars;
},
draw: () => {
gsap.set(scene.subWords, {
opacity: 0,
x: -5,
y: 15,
rotate: 45,
transformOrigin: "0 0",
onComplete: () => {
gsap.set(scene.sub, { opacity: 1 });
}
});
scene.title.classList.add("out");
scene.title.addEventListener("animationend", (e) => {
setTimeout(() => {
e.target.classList.add("back");
gsap.to(scene.subWords, {
opacity: 1,
x: 0,
y: 0,
rotate: 0,
transformOrigin: "0 0",
duration: 0.6,
stagger: 0.06,
onComplete: () => {
setTimeout(() => {
scene.move.classList.add("out");
}, 750);
}
});
}, 500);
});
scene.tL
.fromTo(
scene.emptySlots[2],
{ drawSVG: "50% 50%" },
{ drawSVG: "100%", duration: 1.5 }
)
.fromTo(
scene.emptySlots[6],
{ drawSVG: "50% 50%" },
{ drawSVG: "100%", duration: 1.5 },
">-1.4"
)
.fromTo(
scene.emptySlots[3],
{ drawSVG: "50% 50%" },
{ drawSVG: "100%", duration: 1.5 },
">-1.4"
)
.fromTo(
scene.emptySlots[0],
{ drawSVG: "50% 50%" },
{ drawSVG: "100%", duration: 1.5 },
">-1.4"
)
.fromTo(
scene.emptySlots[5],
{ drawSVG: "50% 50%" },
{ drawSVG: "100%", duration: 1.5 },
">-1.4"
)
.fromTo(
scene.emptySlots[7],
{ drawSVG: "50% 50%" },
{ drawSVG: "100%", duration: 1.5 },
">-1.4"
)
.fromTo(
scene.emptySlots[1],
{ drawSVG: "50% 50%" },
{ drawSVG: "100%", duration: 1.5 },
">-1.4"
)
.fromTo(
scene.emptySlots[8],
{ drawSVG: "50% 50%" },
{ drawSVG: "100%", duration: 1.5 },
">-1.4"
)
.fromTo(
scene.emptySlots[4],
{ drawSVG: "50% 50%" },
{
drawSVG: "100%",
duration: 1.5,
onComplete: () => {
setTimeout(() => {
scene.mask.classList.add("out");
scene.tL
.to(scene.leaves, {
scale: 0,
duration: 0.5,
stagger: { each: 0.05, from: "random" }
})
.to(scene.pathEls, { opacity: 0, duration: 1.75 }, ">-1.75");
}, 250);
}
},
">-1.4"
);
}
};
scene.createRaw();
scene.sliceUp();
scene.splitSub();
setTimeout(() => {
scene.draw();
}, 2000);
/*
*/
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathPlugin.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText3.min.js"></script>
Raw
style.scss
@font-face {
font-family: "decovar";
src: url("//rawgit.com/TypeNetwork/fb-Decovar/master/fonts/DecovarAlpha-VF.ttf");
}
body {
background: black;
}
@mixin placeLeaf($x, $y, $r, $s) {
position: absolute;
clip-path: url("#leaf");
background: #ff4500;
width: 10vw;
height: 15vw;
top: $y + vw;
left: $x + vw;
transform: rotate($r + deg) scale($s);
}
.scene {
--main: #ff4500;
--neu-dark: #9c2a00;
--neu-light: #ff6e00;
width: 100vw;
height: 70vw;
background: url("https://ik.imagekit.io/g0osqsaljoz/Random/movingtree_GnWaL8TcY.jpg");
background-size: contain;
background-repeat: repeat-x;
display: flex;
justify-content: flex-end;
align-items: center;
position: relative;
overflow: hidden;
.overlay {
position: absolute;
background: var(--main);
width: 100%;
height: 100%;
z-index: 0;
transition: all 1s ease;
&.out {
background: transparent;
}
}
.leaf.one {
@include placeLeaf(10, 0, 160, 5);
}
.leaf.two {
@include placeLeaf(60, 45, 150, 9);
}
.leaf.three {
@include placeLeaf(10, 25, -45, 8);
}
.leaf.four {
@include placeLeaf(0, 55, 25, 7);
}
.leaf.five {
@include placeLeaf(25, 50, 0, 7);
}
.leaf.six {
@include placeLeaf(60, 0, 120, 5);
}
.leaf.seven {
@include placeLeaf(40, 35, -135, 5);
}
.leaf.eight {
@include placeLeaf(66, 22, -30, 7);
}
.leaf.nine {
@include placeLeaf(35, 10, -25, 9);
}
.leaf.ten {
@include placeLeaf(90, 0, 230, 7);
}
.leaf.eleven {
@include placeLeaf(85, 50, 45, 5);
}
.leaf.twelve {
@include placeLeaf(85, 27, 0, 6);
}
svg {
width: 100%;
position: absolute;
}
@keyframes pushUp {
0% {
text-shadow: 0px 0px 0px var(--neu-dark), 0px 0px 0px var(--neu-light),
0px 0px 0px var(--neu-dark), 0px 0px 0px var(--neu-light),
0px 0px 0px var(--neu-dark), 0px 0px 0px var(--neu-dark),
0px 0px 0px var(--neu-dark), 0px 0px 0px var(--neu-dark),
0px 0px 0px var(--neu-dark), 0px 0px 0px var(--neu-dark),
0px 0px 0px var(--neu-dark), 0px 0px 0px var(--neu-dark);
color: #ff4500;
font-variation-settings: "BLDA" 0, "SKLB" 0;
}
50% {
text-shadow: 1px 1px 1px var(--neu-dark), -1px -1px 1px var(--neu-light),
2px 2px 2px var(--neu-dark), -2px -2px 2px var(--neu-light),
3px 3px 2px var(--neu-dark), 4px 4px 2px var(--neu-dark),
5px 5px 2px var(--neu-dark), 6px 6px 2px var(--neu-dark),
7px 7px 2px var(--neu-dark), 8px 8px 2px var(--neu-dark),
9px 9px 2px var(--neu-dark), 10px 10px 2px var(--neu-dark);
color: #ff4500;
font-variation-settings: "BLDA" 0, "SKLB" 1000;
}
100% {
color: transparent;
background: url("https://ik.imagekit.io/g0osqsaljoz/Random/andrew-buchanan-Ipvjzj5YBu4-unsplash-min_7D2suriQNa_.jpg");
background-size: contain;
background-clip: text;
font-variation-settings: "BLDA" 800, "SKLB" 1000;
text-shadow: none;
}
}
.neo {
margin: 0;
position: relative;
letter-spacing: 0.75vw;
color: #ff4500;
transform: translate(15%, -35%);
font-family: "decovar";
font-weight: 600;
font-variation-settings: "BLDA" 0, "SKLB" 0;
font-size: 10vw;
text-shadow: none;
opacity: 0;
z-index: 0;
&:before {
content: "NATURE";
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
text-shadow: 1px 1px 1px rgba(#183600, 0), -1px 1px 1px rgba(#183600, 0),
-1px -1px 1px rgba(#183600, 0), 1px -1px 1px rgba(#183600, 0);
transition: all 0.3s linear 1.5s;
}
&.out {
opacity: 1;
animation: pushUp 2s ease forwards;
&:before {
text-shadow: 2px 2px 1px rgba(#183600, 0.4),
-2px 2px 1px rgba(#183600, 0.4), -2px -2px 1px rgba(#183600, 0.4),
2px -2px 1px rgba(#183600, 0.4);
}
}
@keyframes retro {
0% {
color: transparent;
background: url("https://ik.imagekit.io/g0osqsaljoz/Random/andrew-buchanan-Ipvjzj5YBu4-unsplash-min_7D2suriQNa_.jpg");
background-size: contain;
background-clip: text;
font-variation-settings: "BLDA" 800, "SKLB" 1000;
text-shadow: none;
letter-spacing: 0.75vw;
}
99% {
color: white;
background: url("https://ik.imagekit.io/g0osqsaljoz/Random/andrew-buchanan-Ipvjzj5YBu4-unsplash-min_7D2suriQNa_.jpg");
background-size: contain;
background-clip: text;
font-variation-settings: "BLDA" 0, "SKLB" 0;
text-shadow: none;
}
100% {
color: white;
font-variation-settings: "BLDA" 0, "SKLB" 0;
text-shadow: none;
letter-spacing: 0.5vw;
}
}
&.out.back {
animation: retro 1s ease forwards;
&:before {
text-shadow: 2px 2px 1px rgba(#000, 0.4), -2px 2px 1px rgba(#000, 0.4),
-2px -2px 1px rgba(#000, 0.4), 2px -2px 1px rgba(#000, 0.4);
}
}
}
.sub {
font-family: sans-serif;
font-weight: 600;
font-size: 2vw;
color: white;
letter-spacing: 0.4vw;
align-self: center;
transform: translate(-31.85vw, 100%);
text-shadow: 1px 1px 1px rgba(#000, 0.8), -1px 1px 1px rgba(#000, 0.8),
-1px -1px 1px rgba(#000, 0.8), 1px -1px 1px rgba(#000, 0.8);
opacity: 0;
}
.move {
font-family: "decovar";
font-weight: 600;
font-size: 7vw;
color: transparent;
position: relative;
transform: translate(-140%, 80%);
text-shadow: -0px -0px 0px rgba(#183600, 0), -0px -0px 0px rgba(#183600, 0),
-0px -0px 0px rgba(#183600, 0), -0px -0px 0px rgba(#183600, 0),
-0px -0px 0px rgba(#183600, 0);
letter-spacing: 0.3vw;
&:before {
content: "";
position: absolute;
width: 95%;
height: 67.5%;
top: 35%;
left: 12.5%;
z-index: -1;
background: var(--main);
transform: scaleX(0);
transform-origin: top left;
transition: transform 1s ease;
}
@keyframes shift {
0% {
color: transparent;
text-shadow: -0px -0px 0px rgba(#183600, 0.7),
-0px -0px 0px rgba(#183600, 0.7), -0px -0px 0px rgba(#183600, 0.7),
-0px -0px 0px rgba(#183600, 0.7), -0px -0px 0px rgba(#183600, 0);
font-variation-settings: "WMX2" 0;
}
100% {
color: white;
text-shadow: -1px -1px 1px rgba(#183600, 0.7),
-2px -2px 1px rgba(#183600, 0.7), -3px -3px 1px rgba(#183600, 0.7),
-4px -4px 1px rgba(#183600, 0.7), -5px -5px 1px rgba(#183600, 0.7);
font-variation-settings: "WMX2" 500;
}
}
&.out {
animation: shift 0.4s linear forwards;
&:before {
transform: scaleX(1);
}
}
}
}
@media (min-width: 1017px) {
.scene {
background-size: cover;
transform: translateY(-26%);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment