Jump to content
Search Community

gsap not showing up in browser

David Fetherston test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution



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!

Link to comment
Share on other sites

I noticed several problems: 

  1. You weren't loading GSAP or any of the plugins
  2. 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.
  3. 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)?
  4. 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

Link to comment
Share on other sites

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

Link to comment
Share on other sites



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:


  <!-- 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>

That should work in your local setup.


Happy Tweening!

  • Like 1
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...