Jump to content


GSAP and HTML Canvas - I'm lost

Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm new to all of this greensock/html stuff and I'm trying to run greensock with an html5 canvas element. I found this CODEPEN: 

See the Pen ychlf by jonathan (@jonathan) on CodePen

by Jonathan Marzullo. It's close to what I'm trying to get to and it's simple enough to where I think I roughly understand what's going on with the javascript and greensock.
I can see how the loop function is wiping the canvas with each tick and redrawing it.
I copied the code out and built my own CODEPEN and it all behaves fine in my CODEPEN: 
But when I move the code to an html, css and js document it doesn't work. All I get is a blank page. I'm making these calls in the head of my document:
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>

<script src="js/jquery.gsap.min.js"></script>
Probably overkill for what I need to do, but I just can't get it to work.
Is there something painfully obvious that I'm doing wrong?
Should I be calling the js files at the end of the html file before the closing body tag?

Sorry, these are all probably super simple questions, but I'm a total novice at this stuff.

Thank you for your time.

See the Pen ENMRoo by kp1111CodePen (@kp1111CodePen) on CodePen

Link to comment
Share on other sites

  • Solution

Put your JavaScripts at the bottom, and you should be good.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
    <script src="foo.js"></script>

I wrote about using the canvas here...



Some people have a really hard time understanding how to use it, but there's a bunch of libraries to help with that. Is this easier to understand?

See the Pen 45c439fce0ae5da9421b01ef7fbf2f3f?editors=0010 by osublake (@osublake) on CodePen


That's using Pixi.js. It's the most popular canvas library, and can do some crazy stuff. Here's another simple demo showing off its power. 5,000 GreenSock hereos...

See the Pen 26128085f615696e60f6fd4f918954d1?editors=0010 by osublake (@osublake) on CodePen



  • Like 4
Link to comment
Share on other sites

Thank you OSUblake. I really appreciate the help! I'll check those out. I seem to have found my way by referencing this CodePen: 

See the Pen BjPBwQ?editors=0010 by dipscom (@dipscom) on CodePen

and about a thousand other links out on the web. 

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.