Invalid property drawSVG set to 0% Missing plugin? gsap.registerPlugin()

Kyuumei Neko · November 13, 2022

I don't know why drawSVG inactivity. Some one can help me pls? Here is my error

And here is my code

<!DOCTYPE html>

<head>

<title> Kyuumei Neko </title>

<style>

:root {

--bg: #1a1e2d;

--green: #a5ea9b;

--pink: #ff61d8;

--blue: #569cfa;

--orange: #ffcc81;

--cyan: #7ed1e2;

}

body {

height: 100vh;

width: 100vw;

background: var(--bg);

display: flex;

place-content: center;

align-items: flex-end;

overflow: hidden;

}

.container {

width: 80vw;

height: 80vh;

}

.container svg {

height: 100%;

width: 100%;

overflow: visible;

}

#bongo-cat {

fill: var(--bg);

stroke-linecap: round;

stroke-linejoin: round;

stroke-width: 4;

}

#bongo-cat .laptop-cover,

#bongo-cat .headphone .band {

fill: none;

}

#bongo-cat .paw,

#bongo-cat .head {

stroke: var(--orange);

}

#bongo-cat .laptop-keyboard {

stroke-width: 2;

}

#bongo-cat .terminal-code {

stroke-width: 5;

}

#bongo-cat .music .note,

#bongo-cat .laptop-base,

#bongo-cat .laptop-cover,

#bongo-cat .paw .pads {

stroke: var(--pink);

}

#bongo-cat .table line,

#bongo-cat .headphone .band,

#bongo-cat .headphone .speaker path:nth-child(3) {

stroke: var(--green);

}

#bongo-cat .terminal-frame,

#bongo-cat .laptop-keyboard,

#bongo-cat .headphone .speaker path:nth-child(2) {

stroke: var(--blue);

}

#bongo-cat .terminal-code,

#bongo-cat .headphone .speaker path:first-child {

stroke: var(--cyan);

}

</style>

</head>

<body>

<path

d="M280.4,221l383.8,62.6a171.4,171.4,0,0,0-9.2-40.5,174,174,0,0,0-28.7-50.5,163.3,163.3,0,0,0,3.2-73.8c-11.6-1.9-42,14.2-44.5,17.5-19.6-24-88.5-52.7-153.7-48.1A78.8,78.8,0,0,0,398,67.1c-9.8,2.9-19,29.7-19.4,33.7a320,320,0,0,0-31.7,23.6c-14,11.8-28.9,24.4-42.5,44.3A173,173,0,0,0,280.4,221Z">

</path>

</path>

<path

d="M474,179.2a6.6,6.6,0,0,0-4.9,3.6,6,6,0,0,0,1.5,7.3,6,6,0,0,0,7.9-1c2.3-2.6,2-7,.2-8s-5.9,1.6-5.7,3.5,1.9,2.8,3.2,2.3,1.1-2.2,1.1-2.3">

</path>

<path

d="M365.4,168.9c0,.3-.8,3.6,1.5,6a5.9,5.9,0,0,0,7.2,1.4,6.1,6.1,0,0,0,2.2-7.7c-1.5-3.1-5.7-4.5-7.3-3.2s-.8,6,1,6.6,3.3-.7,3.3-2.1-1.5-1.8-1.6-1.9">

</path>

<path

d="M400.7,80.2c-14.1-20.8-40.2.3-50.7,15-8.7,12.2-9.7,30.3,2.8,37.3,5.4-9,11.8-15.6,21-26.2A214.1,214.1,0,0,1,400.7,80.2Z">

</path>

<path

d="M381.5,79.4c-6.6-7.5-9.6-5.8-12.3-5.5-16.3,1.3-32,20.3-27.8,33.9a21.8,21.8,0,0,0,5.9,8.5c1.7-2.6,3.5-5.1,5.4-7.7A150.7,150.7,0,0,1,381.5,79.4Z">

</path>

<path

d="M367.3,77.8a13.1,13.1,0,0,0-5.1-1.8c-8.5-.9-18.7,7.5-18.4,16.1a12.8,12.8,0,0,0,2.6,7c3.1-3.3,6.3-6.8,9.6-10.2S363.6,81.3,367.3,77.8Z">

</path>

</g>

</g>

<g>

</path>

</g>

<g>

</path>

</g>

<g>

</path>

</g>

<g>

</path>

</g>

</g>

<g>

</g>

<g>

</g>

<line x1="25.3" y1="158.5" x2="783.2" y2="293" fill="none" stroke="#8d00fc" stroke-miterlimit="10"

stroke-width="4"></line>

</g>

</polygon>

</polygon>

</polygon>

</g>

<path class="down"

d="M289.1,181.7c-12.1,9.8-20.6,20.7-20.7,32.1-.2,9,3.8,20.4,13.3,25.2s20.1.6,29.6-3.4c13.4-5.7,23.9-14.6,29.4-21.5">

</path>

<path

d="M327.3,170c-.4-1.4-6.3-18.8-23.5-23.5-.8-.2-18.6-4.7-28.9,6.3-8.4,9.1-6,22.5-4.6,30.2a54.3,54.3,0,0,0,8.1,19.9">

</path>

</path>

</path>

</g>

</g>

<path

d="M586.6,208.8c-.6-2.3-4.2-15.6-17.2-22.2-2.7-1.3-12.8-6.4-23.6-1.8s-14.6,16.5-14.8,18.4c-1.2,9-.7,18.4,2.4,26.1,2.4,6,7.5,17.2,9.7,20.2">

</path>

<path

d="M561.4,194.9a2.7,2.7,0,0,1,3,.5c.4,1-1.4,2.4-2.6,2.2a1.5,1.5,0,0,1-1.1-1.3A1.2,1.2,0,0,1,561.4,194.9Z">

</path>

<path

d="M550.7,200.4c.4-.5,1.1-1.1,1.7-.8a2,2,0,0,1,.8,2.2c-.3,1.2-1.8,2-2.5,1.5S550.1,201.3,550.7,200.4Z">

</path>

</g>

<path class="down"

d="M534.1,231.4c-19.7,6-32.9,18.4-34.2,29.1a30.1,30.1,0,0,0,1.7,14.1,24.8,24.8,0,0,0,6.1,8.8c6,5.1,16.8,4,38-3.9a288.7,288.7,0,0,0,46.5-22.1">

</path>

</g>

<path

d="M609.5,137.3c-17.1,6.3-20.7,51.4-4.5,67.3,1.4,1.5,5.5,5.5,11.3,5.9,8.2.5,14.5-6.3,16.9-8.9,10.1-11,11.5-27.5,8.1-40.1-1.4-4.8-3.9-14-12.7-19.9C627.4,140.8,617.7,134.3,609.5,137.3Z">

</path>

<path

d="M626.5,196.1c2.7-.4,5.9-2.6,9.3-6,6.6-6.6,6.8-16.6,5.8-24s-4.2-16.1-11.3-19.7a18.7,18.7,0,0,0-10.9-1.9C614,149.3,615.3,192.6,626.5,196.1Z">

</path>

</g>

</g>

<g>

</path>

</path>

</g>

<g>

</path>

</path>

</g>

<g>

</path>

</path>

</g>

<g>

</path>

</path>

</g>

</path>

</g>

<g>

</path>

</g>

<g>

</path>

</g>

</svg>

</div>

"use strict";

// Inspired By

//

var _a, _b;

// 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) {

(_a = note === null || note === void 0 ? void 0 : note.parentElement) === null || _a === void 0 ? void 0 : _a.appendChild(note.cloneNode(true));

(_b = note === null || note === void 0 ? void 0 : note.parentElement) === null || _b === void 0 ? void 0 : _b.appendChild(note.cloneNode(true));

}

const music = { note: s(".music .note") };

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,

});

// typing for pipe function doesn't seem to be working for usage when partially applied?

const noteElFn = gsap.utils.pipe(gsap.utils.toArray, gsap.utils.shuffle);

const noteEls = noteElFn(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");

</script>

</body>

</html>

See the Pen LJqYey by abeatrize (@abeatrize) on CodePen

Trapti · November 13, 2022

Hi,

This is very confusing. What exactly you want to animate using DrawSVG ?. In the given codepen there is no use of DrawSVG.

The codepen you posted earlier I forked that. In the terminal line Draw SVG is working fine where it is being used.

See the Pen LYrLVaG?editors=1010 by tripti1410 (@tripti1410) on CodePen

GreenSock · November 13, 2022

That error basically means you forgot to load (or register) DrawSVGPlugin. Remember, that’s a bonus plugin for Club GreenSock members. It looks like you haven’t signed up quite yet. Https://GreenSock.com/club

Notifications

Messages

Invalid property drawSVG set to 0% Missing plugin? gsap.registerPlugin()

Recommended Posts

Kyuumei Neko

Link to comment

Share on other sites

Trapti

Link to comment

Share on other sites

GreenSock

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members