drawSVG not working

[thomasJack 2 Likes (Newbie)]

I did the install in order to include as script tag as shown on video, although the video is awful, maybe try something like linda.com used to do. I cant even see the whole screen in order to see exactly what hes doing. what am I doing wrong? Please help.

 

<script src="js/DrawSVGPlugin.min.js"></script>

<script src="js/gsap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/TextPlugin.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js" integrity="sha512-f8mwTB+Bs8a5c46DEm7HQLcJuHMBaH/UFlcgyetMqqkvTcYg4g5VXsYR71b3qC82lZytjNYvBj2pf0VekA9/FQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="js/indexAnimate.js" async></script>

[thomasJack 2 Likes (Newbie)]

Actually, i want my money back, or ill call bank because your instructional videos are insane, you take 3 minutes explaining something, in a way that only people that are super familiar would understand. i have node js installed, but how i find ~/.npmrc is explained so terribly that i want my money back. you've made me waste hours because you cant  take the time to explain something properly.

[thomasJack 2 Likes (Newbie)]

ill call the bank thank you for taking three minutes explaining your install, with all 4 videos, i suppose you took 12 minutes in 5 years time, great

[thomasJack 2 Likes (Newbie)]

okay i was able to install just as stated on video, im still getting the error message of plugin missing, and all it did was install one package

 

paultennant@pauls-MacBook-Pro ~ % vim ~/.npmrc
paultennant@pauls-MacBook-Pro ~ % npm install gsap@npm:@gsap/shockingly

added 1 package in 6s
paultennant@pauls-MacBook-Pro ~ % cd /applications/xampp/htdocs/datadots/
paultennant@pauls-MacBook-Pro datadots % npm install gsap@npm:@gsap/shockingly

changed 1 package, and audited 2 packages in 2s

found 0 vulnerabilities
paultennant@pauls-MacBook-Pro datadots %

[GreenSock 18,256 Likes (Superhero)]

Hey @thomasJack. I'm so sorry about the hassle/confusion! We feel your pain - it has been so frustrating to go from the simplicity of <script> tags in the "old" days (which of course you can still do) to the proliferation of a bunch of different bundlers, build tools, NPM, private repos, Yarn, Webpack, Vite, CDNs, etc., etc. We've found it to be challenging to not only accommodate all the options (we want to serve our users well and give them what they're asking for), but also explain how to install it in the various environments. Ugh! It can be overwhelming. 

 

I'm not sure what your dev environment is like, but in my opinion the simplest path to getting the plugins loaded is to just download the zip, pick the minified ones you need, and just drop them into your project's directory, loading them with a simple <script> tag. That way, they live with your project. No need to mess with NPM, .npmrc files, tokens, etc. 

 

I feel badly that we let you down with the install instructions. We're working on a new learning center and we'll aim to improve things. Thanks for your patience. And of course if you want to cancel your membership and get a full refund, that's absolutely no problem. Just let us know. 

 

Since we can't see what's happening for you, it's difficult for us to troubleshoot why you're getting the message about DrawSVGPlugin not being registered. Are you seeing that message in the console? Do you mind pasting the exact message here please? Maybe you could DM me (or fill out the contact-us form) to privately send me a link to a repo or anything that allows me to reproduce the issue. We're eager to help. 

[thomasJack 2 Likes (Newbie)]

Well thank you Jack, here are the error logs in console

 

 

GSAP target #bar2 not found. https://greensock.com gsap.min.js:10:933

GSAP target not found. https://greensock.com gsap.min.js:10:933

GSAP target #logo not found. https://greensock.com gsap.min.js:10:933

GSAP target not found. https://greensock.com gsap.min.js:10:933

GSAP target #bar not found. https://greensock.com gsap.min.js:10:933

GSAP target not found. https://greensock.com gsap.min.js:10:933

Invalid property opcaity set to 0 Missing plugin? gsap.registerPlugin() gsap.min.js:10:821

Invalid property drawSVG set to 100% Missing plugin? gsap.registerPlugin() gsap.min.js:10:821

GSAP target not found. https://greensock.com 3 gsap.min.js:10:933

Invalid property opcaity set to 0 Missing plugin? gsap.registerPlugin() gsap.min.js:10:821

Source map error: Error: NetworkError when attempting to fetch resource. Resource URL: moz-extension://b71d79c4-9709-4610-9fc5-29a4a2ede51b/model/static/DOMPurify/purify.min.js Source Map URL: purify.min.js.map

 

Invalid property drawSVG set to 100% Missing plugin? gsap.registerPlugin() gsap.min.js:10:821

Invalid property drawSVG set to 50% 50% Missing plugin? gsap.registerPlugin() gsap.min.js:10:821

 

[thomasJack 2 Likes (Newbie)]

here is my js

 

function changeBKG(){

const animBKG = gsap.timeline({defaults:{duration:2}})

const newBkg = document.getElementById('background');

const logoO = document.getElementById('oOutline');

const logoU = document.getElementById('dataDotsU');

const logoR = document.getElementById('DotsLogoR');

const logoDotBullets = document.getElementsByClassName('logoGradientTextCont');

animBKG.fromTo(newBkg, {y:-3000, opcaity:0}, {y:0, opacity: 1});

animBKG.fromTo(logoO, {drawSVG:"100%"}, {duration: 10, drawSVG:"50% 50%"});

// animeLogo.from(logoO, 1, {drawSVG:"50% 50%", delay:0.5, ease:Bounce.easeOut});

// animBKG.fromTo(logoU, {y:-2000, opcaity:0}, {y:0, opacity: 1, duration: 1});

// animBKG.fromTo(logoR, {scale:0, opcaity:0, transformOrigin:"50% 50%"}, {scale:1, opacity: 1, rotation:"+=360", duration: 1});

// gsap.to(logoDotBullets, {

// duration: 1,

// scale: 0.1,

// y: 40,

// ease: "power1.inOut",

// stagger: {

// grid: [7,15],

// from: "end",

// axis: "y",

// ease: "power3.inOut",

// amount: 1.5

// }

// });

// const tl = new TimelineMax({onStart: console.log('play'), onComplete: animateLogo()});

 

}

 

changeBKG();

 

function animateText(){

const dataDotsText = new SplitType('DotsHeader')

gsap.to('.char'),{

y:0,

stagger: 0.05,

delay: 0.2,

duration: .1

}

}

[elegantseagulls 1,409 Likes (Superhero)]

3 minutes ago, thomasJack said:

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

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

For these: opacity is misspelled. And you'll want to register your drawSVG plugin by adding gsap.registerPlugin(DrawSVGPlugin) to the top of your js.

 

The target not found errors look like maybe there's more errors in your js or it's running before those elements are available in the dom (or maybe they on another page, and you aren't conditionally checking for them).

[elegantseagulls 1,409 Likes (Superhero)]

This may help get you better started with using GSAP: https://www.creativecodingclub.com/courses/FreeGSAP3Express

[GreenSock 18,256 Likes (Superhero)]

Yeah, that actually looks like the things you're trying to animate don't exist when your code is executing. I've seen this happen when people put their JavaScript in the <head> or top of the <body>, so it runs BEFORE the browser has parsed any of the elements. 

 

For example:

<body> 
  <script>
    // This won't find the element because it doesn't exist at this point!
    console.log(document.getElementById("thing")); 
  </script>
  <div id="thing"></div>
</body>

So all you'd need to do is move your code to the bottom of the <body>, or just wrap it in a "DOMContentLoaded" event handler so that it doesn't execute until the browser is done parsing everything.

[thomasJack 2 Likes (Newbie)]

It all worked, thank you very much everyone. Tutorial videos should have those points though of including that in script, would have saved me much time but still appreciated

[GreenSock 18,256 Likes (Superhero)]

I'm glad you got it working! 🥳

 

Thanks for being a Club GreenSock member, @thomasJack. Enjoy the tools!