114 lines
2.6 KiB
JavaScript
114 lines
2.6 KiB
JavaScript
|
// Inspired By
|
||
|
|
// https://codepen.io/abeatrize/pen/LJqYey
|
||
|
|
|
||
|
|
// Bongo Cat originally created by @StrayRogue and @DitzyFlama
|
||
|
|
|
||
|
|
const ID = "bongo-cat";
|
||
|
|
const s = selector => `#${ID} ${selector}`;
|
||
|
|
const notes = document.querySelectorAll(".note");
|
||
|
|
|
||
|
|
for (let note of notes) {
|
||
|
|
note.parentElement.appendChild(note.cloneNode(true));
|
||
|
|
note.parentElement.appendChild(note.cloneNode(true));
|
||
|
|
}
|
||
|
|
|
||
|
|
const music = { note: s(".music .note") };
|
||
|
|
const terminal = { frame: s(".terminal-frame"), code: s(".terminal-code line") };
|
||
|
|
const cat = {
|
||
|
|
pawRight: {
|
||
|
|
up: s(".paw-right .up"),
|
||
|
|
down: s(".paw-right .down") },
|
||
|
|
|
||
|
|
pawLeft: {
|
||
|
|
up: s(".paw-left .up"),
|
||
|
|
down: s(".paw-left .down") } };
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
const style = getComputedStyle(document.documentElement);
|
||
|
|
|
||
|
|
const green = style.getPropertyValue("--green");
|
||
|
|
const pink = style.getPropertyValue("--pink");
|
||
|
|
const blue = style.getPropertyValue("--blue");
|
||
|
|
const orange = style.getPropertyValue("--orange");
|
||
|
|
const cyan = style.getPropertyValue("--cyan");
|
||
|
|
|
||
|
|
gsap.set(music.note, { scale: 0, autoAlpha: 1 });
|
||
|
|
|
||
|
|
const animatePawState = (selector) =>
|
||
|
|
gsap.fromTo(
|
||
|
|
selector,
|
||
|
|
{ autoAlpha: 0 },
|
||
|
|
{
|
||
|
|
autoAlpha: 1,
|
||
|
|
duration: 0.01,
|
||
|
|
repeatDelay: 0.19,
|
||
|
|
yoyo: true,
|
||
|
|
repeat: -1 });
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
const tl = gsap.timeline();
|
||
|
|
|
||
|
|
tl.
|
||
|
|
add(animatePawState(cat.pawLeft.up), "start").
|
||
|
|
add(animatePawState(cat.pawRight.down), "start").
|
||
|
|
add(animatePawState(cat.pawLeft.down), "start+=0.19").
|
||
|
|
add(animatePawState(cat.pawRight.up), "start+=0.19").
|
||
|
|
timeScale(1.6);
|
||
|
|
|
||
|
|
gsap.from(".terminal-code line", {
|
||
|
|
drawSVG: "0%",
|
||
|
|
duration: 0.1,
|
||
|
|
stagger: 0.1,
|
||
|
|
ease: 'none',
|
||
|
|
repeat: -1 });
|
||
|
|
|
||
|
|
|
||
|
|
const noteEls = gsap.utils.pipe(
|
||
|
|
gsap.utils.toArray,
|
||
|
|
gsap.utils.shuffle)(
|
||
|
|
music.note);
|
||
|
|
|
||
|
|
const numNotes = noteEls.length / 3;
|
||
|
|
const notesG1 = noteEls.splice(0, numNotes);
|
||
|
|
const notesG2 = noteEls.splice(0, numNotes);
|
||
|
|
const notesG3 = noteEls;
|
||
|
|
|
||
|
|
const colorizer = gsap.utils.random([green, pink, blue, orange, cyan, "#a3a4ec", "#67b5c0", "#fd7c6e"], true);
|
||
|
|
const rotator = gsap.utils.random(-50, 50, 1, true);
|
||
|
|
const dir = amt => `${gsap.utils.random(["-", "+"])}=${amt}`;
|
||
|
|
|
||
|
|
const animateNotes = els => {
|
||
|
|
els.forEach(el => {
|
||
|
|
gsap.set(el, {
|
||
|
|
stroke: colorizer(),
|
||
|
|
rotation: rotator(),
|
||
|
|
x: gsap.utils.random(-25, 25, 1) });
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
return gsap.fromTo(els, {
|
||
|
|
autoAlpha: 1,
|
||
|
|
y: 0,
|
||
|
|
scale: 0 },
|
||
|
|
{
|
||
|
|
duration: 2,
|
||
|
|
autoAlpha: 0,
|
||
|
|
scale: 1,
|
||
|
|
ease: "none",
|
||
|
|
stagger: {
|
||
|
|
from: "random",
|
||
|
|
each: 0.5 },
|
||
|
|
|
||
|
|
rotation: dir(gsap.utils.random(20, 30, 1)),
|
||
|
|
x: dir(gsap.utils.random(40, 60, 1)),
|
||
|
|
y: gsap.utils.random(-200, -220, 1),
|
||
|
|
onComplete: () => animateNotes(els) });
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
tl.
|
||
|
|
add(animateNotes(notesG1)).
|
||
|
|
add(animateNotes(notesG2), ">0.05").
|
||
|
|
add(animateNotes(notesG3), ">0.25");
|