Jump to content
Search Community

drawSVG not working

thomasJack test
Moderator Tag

Recommended Posts

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>
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 %

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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
 
Link to comment
Share on other sites

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
}
}
Link to comment
Share on other sites

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).

  • Like 3
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...