gsap not showing up in browser

David Fetherston · December 7, 2022

If anyone can help out please, gsap is not showing up in my browser. I know its a common problem, but I have made sure gsap is installed in my code-kit and vs code. I have also tried opening the file up with non-bonjour and bonjour from code-kit, but nothing seems to work. dev tools is giving me the issue:

Uncaught TypeError: Cannot read properties of null (reading 'getBBox')

See the Pen wvXOvgv by davidfether (@davidfether) on CodePen

Rodrigo · December 7, 2022

Hi,

In the codepen example you are using imports but there are no ESM modules being included so that is not going to work.

As soon as I replace the imports with the CDN links and also uncomment this part of your HTML it seems to work:

<circle id="center" cx="632" cy="305" r="130" fill="#000" />

See the Pen BaVbarN by GreenSock (@GreenSock) on CodePen

The issue could stem from this:

var center = document.querySelector("#center");
center = center.getBBox();

With that part of your HTML commented out that is undefined and you get the getBBox() error.

Hopefully this helps. Let us know if you have more questions.

Happy Tweening!

David Fetherston · December 7, 2022

Thanks Rodrigo, it works!

David Fetherston · December 7, 2022

Unfortunately it is not working again! When i add my own svg elements in, and change the gsap it is not responding.

here is the codepen link:

See the Pen wvXOBvo by davidfether (@davidfether) on CodePen

GreenSock · December 7, 2022

I noticed several problems:

You weren't loading GSAP or any of the plugins
You're trying to animate the stroke of an element that doesn't have a stroke at all (you've only got it filled). I added a red stroke just so you can ee what's happening.
You were animating "from()" a value of "0% 100%" which is fully stroked, and that's the default/starting value anyway, so you'd never see any animation (you're animating to the state it's already in). I imagine you meant to animate from "0% 0%" (or false)?
You included <head> and <body> tags in your CodePen which isn't valid (they add that for you).

This should help show you what's going on. I slowed down the tween too:

See the Pen vYrPExL by GreenSock (@GreenSock) on CodePen

David Fetherston · December 7, 2022

Thanks jack, I understand those mistakes. When I paste all of that existing code into my vs code, unfortunately it is still not working. It says my gsap, devtools, and drawsvg are not defined. This must be an internal issue, or maybe I'm not installing them correctly?

Sorry for the misunderstanding still a beginner here. Thanks. Heres the codepen

See the Pen qBKvEvO by davidfether (@davidfether) on CodePen

Rodrigo · December 8, 2022

Hi,

In VS Code if you are not using a build system like WebPack, Vite, etc. you need to include the files you can download on your account dashboard. Just go to your dashboard and you'll find the download links:

Then extract the files and take the files from the src or minified folder and put them in your project's folder and add them in a script tag before the closing body tag and before your custom JS file:

https://greensock.com/docs/v3/Installation#download

<body>
  <!-- CONTENT -->
  <script src="/[YOUR_DIRECTORY]/gsap-core.min.js"></script>
  <script src="/[YOUR_DIRECTORY]/DrawSVGPlugin.min.js"></script>
  <script src="/[YOUR_DIRECTORY]/GSDevTools.min.js"></script>
  <script src="/[YOUR_DIRECTORY]/script.js"></script>
</body>

That should work in your local setup.

Happy Tweening!

Notifications

Messages

gsap not showing up in browser

Recommended Posts

David Fetherston

Link to comment

Share on other sites

Rodrigo

Link to comment

Share on other sites

David Fetherston

Link to comment

Share on other sites

David Fetherston

Link to comment

Share on other sites

GreenSock

Link to comment

Share on other sites

David Fetherston

Link to comment

Share on other sites

Rodrigo

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members