[GSAP and HTML Canvas - I'm lost]

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. 

[GSAP and HTML Canvas - I'm lost]

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="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/plugins/CSSPlugin.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/easing/EasePack.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenLite.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.

 

Kevin

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

[How to fix stuttering motion on scaled image]

It looks like you're animating the "left" property which browsers always snap to whole pixels. That's what gives it that jerky feel. GSAP is setting the values properly, of course, but the browser won't allow sub-pixel rendering for those. It's much better to animate the "x" property (which is like transform:translateX()) because not only is that cheaper for the browser to animate (it doesn't affect layout), but it can also do sub-pixel rendering on it. 

 

Just beware that "x" isn't the same thing as "left" (though both affect horizontal movement). "x" describes the offset from the normal position in the document flow, whereas "left" is more like an offset from its offsetParent. You might want to read up on CSS transforms to more fully understand. 

 

Thank you so much! I'll try that and see what happens. Really appreciate the help.

[How to fix stuttering motion on scaled image]

Hello,

 

I'm new to GSAP (and Codepen as well) and trying to learn as I go. I'm having some issues with stuttering motion on images when they are scaling and moving. Hopefully the Codepen I posted will show the issue.
Please let me know if I need to post more information.
Any help would be greatly appreciated. Thank you!

 

Kevin

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