Controlling items on Canvas with GSAP... info?

[ladlon]

Where can I find a guide for the current and proper method to control images on a Canvas via Greensock tweens, in a way that has the same 'works in everything' quality that other GSAP commands do?

 

Most of the references I've found over the last two days seem to just animate using Canvas commands (rather than GSAP tweens) or are examples from years ago, or have a lot of support coding required.

[OSUblake]

I don't know what you saw, but that will always be the proper way to do canvas with gsap.

 

Those drawing commands are just like the html of a web page. You can't make a web page without html, right? Well you can't do a canvas animation without a bunch of drawing commands.

 

 

[ladlon]

Hi.  What I'm asking, is where do I find a current guide on how to animate (via GSAP), images on a Canvas.  I've found a number of different refernces, but many are years old (different version of GSAP, and also may not be the best/current method)... and others seemed to be just pure Canvas, with no GSAP... at least as far as what I currently can recognize.

 

I am comfortable animating DOM items with GSAP, and I know how to place images on Canvas... but I have yet to find a good reference/guide as to how to tween an image on a Canvas vaia GSAP.  I tried doing a regular GSAP tween, referencing the Canvas image items by their class title (which I added), but that didn't seem to work... nor am I even sure if that's the right way... since I can't seem to find any info on how to do it.

[OSUblake]

There is no guide for gsap. It's just knowing how to use canvas.

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

 

There are no "best/current" methods to animate canvas. Just tween an object, and then draw the changes in a ticker callback. What objects you tween is up to you. 

 

The only difference between versions will be minor syntax changes.

 

 

And yes, there are some canvas demos on this forum that don't use gsap. You have to read why they were posted there. Some people just copy and paste canvas code, asking for general help. 

 

 

[ladlon]

Okay, that guide page you sent me to looks good.  Thanks.  I didn't want to rely on some random guy's video on YouTube, as who knows if his technique/coding is clean.

 

Okay, so I guess GSAP hasn't changed much, nor the methods in general...  I just wanted to be sure, as I don't know (...I'm new).  Just like the guys who used to structure websites using Tables, it's a good thing to check once in a while with the experts to see if something better has come along (...like CSS positioning, Bootstrap,etc).  Otherwise, I'm going to be one of those guys (unintentionally) doing things old-school... in a bad way.

 

I'm still unclear on the linking between GSAP tweens and Canvas items... again, new guy.  I have a vague conceptual understanding of things like callbacks... and I think I get what a ticker probably is...  but that's exactly why I'm trying to find a good resource to teach it to myself.

 

So, are you saying that you actually tween an image item that's in the HTML (like you would with non-Canvas GSAP animations), and then somehow transfer that to the Canvas element?  I was seeing some code that hinted towards defining the canvas as a variable or item, but could never quite get what was happening (since I was generally looking at specific, and often complex, examples that someone was asking about... rather than some clean, simplified tutorial example).

 

I thought I could tween a Canvas item by referring to it by it's name (...I tried classes, variable names, etc)... but no go.  If I understand what you are saying, it seems I was doing it in reverse?

[OSUblake]

1 hour ago, ladlon said:

I thought I could tween a Canvas item by referring to it by it's name (...I tried classes, variable names, etc)... but no go. 

 

There are no items in a canvas element. It's just pixels. The best way to understand what is going on is to go through that tutorial, and code every example yourself.

 

I think the Intro to JS course on Khan Academy is another good place to start. It uses a canvas library, but the concepts are mostly the same for vanilla canvas.

https://www.khanacademy.org/computing/computer-programming/programming

 

After that, check out this thread. It's the closest thing to a guide on canvas and gsap as you're going to get. Be sure to click on all the links too.

 

 

But those sources barely scratch the surface. Canvas can get complicated, especially when dealing with Hi-DPI monitors/retina displays. That's really beyond the scope of this forum.

 

[ladlon]

For my current purposes, all I really need to do is have some smaller png images animating on top of a larger 'stage' png image... just randomized drifting of position, rotation.  I also have randomized drifting of things like brightness, scale/skew.  But, that's pretty much it.  No sequences or timelines or interaction.

 

The only reason I'm even trying to use Canvas in this case, is because I want the 'composite' of those to scale as one unit within my responsive page.  I tried doing this with just DOM images, making the smaller images position:relative and shifting them up and onto the larger image using left: and bottom:.

 

All that worked fine... although the positioning was really hit and miss, due to the fact that the larger (stage) image was changing size, and the smaller images had no proper way to be parented to it fully, so I'd have to manually adjust them for each screen size, and make compromises.

 

I liked how Canvas allowed me to build the 'scene' (smaller images on the larger image) on a FIXED size image, so all values could be hard coded/real... and THEN that composite would be responsively scaled.

 

But, currently, the mystery to me is how GSAP and Canvas are linked/communicate.  You telling me that the 'DOM' items are tweened, and then put onto Canvas (somehow) is already a huge insight, as all the other references I've seen just seem to be working entirely in Canvas 'code', with no apparent GSAP... or the code is complex, and pretty tricky for me to full follow with complete confidence.

 

I'll definitely look over the links you provided.  I'm already reading the Canvas guide from the Mozilla site.

 

I'm sure it's fairly simple to do this... I just have no concept going in how the two communicate.

 

 

[OSUblake]

11 minutes ago, ladlon said:

You telling me that the 'DOM' items are tweened, and then put onto Canvas (somehow) is already a huge insight

 

No. There is no DOM with canvas. Everything is done with objects that you have to design yourself. It's explained in all the stuff I've linked to.

 

15 minutes ago, ladlon said:

I liked how Canvas allowed me to build the 'scene' (smaller images on the larger image) on a FIXED size image, so all values could be hard coded/real... and THEN that composite would be responsively scaled.

 

I think it might be easier if you use SVG for that.

 

See the Pen 91f6f804c78b8d9d012cc5000f347db5 by osublake (@osublake) on CodePen

 

 

[elegantseagulls]

Hi @ladlon,

 

I think using DOM pngs might still be your best bet using a single parent div, and the main background image positioned absolute to that, and use relative unites for the the positioning of all the parent's children.

 

If you're still looking at canvas, this is about the most basic gsap tween you can create using it:

See the Pen wbxdJr by elegantseagulls (@elegantseagulls) on CodePen

[ladlon]

@OSUblake: Sure, I get that you can draw shapes, and even place an image on the canvas (using ctx.drawImage, and the various shape/line plotting commands)...  But, the confusion comes from the fact that, as you say, the Canvas is just pixels... a photo of something.  You can't grab anything on it, as it's like a flattened layered image file... no separate elements to grab.  My understanding of how GSAP actually works/communicates with Canvas has ping ponged, as I read/view different references to it.  I'm going to do a ton more reading, but as of yet, I still do not understand WHAT exactly your access with the tweens (when you want to animate Canvas items) and HOW you do it.  It seems the material on GSAP doesn't mention Canvas much, and the Canvas material doesn't mention GSAP much... I understand and am comfortable with GSAP... and am 'familiar' with Canvas... the blank area for me is how the two interact.

 

I'd normally just learn Canvas and leave it at that... but my whole reason for using GSAP (besides the nice single line tween code, with no need for coding intervals/callbacks, etc), was that it had systems/coding built in (under the hood) to ensure that it works on everything... without me having to deal with/code it myself.  Going pure Canvas, I wasn't sure if that would still be the case.

 

Hey, that SVG thing looks great!  That's what I'm after (...assuming I can animate those using the GSAP tweens, which I assume you can).  Weird.. I always thought SVG was a vector format.  What am I confusing it with???  That's why I never really paid much attention to it (as far as GSAP), as I thought it was just a vector format, and I want to use PNGs (...or anything that is good quality, and has full transparency support).  Okay, I'll definitely look into that.

 

@elegantseagulls: Hi.  Ya, I thought that, too... But, I just can't seem to get it to work properly.  Always some aspect of it doesn't work.  I rebuilt the whole thing again today, trying that out... Whereas previously the child objects wouldn't SCALE with the parent object (and everything else worked)... today's version (which I coded a bit different) had the scaling working great... but the positioning wasn't working right!  Seems like it SHOULD work, but something always is compromised.  That's why I was considering Canvas, as it kind of allows you to 'precomp' everything before it gets scaled down...  I'm still wanting to try that route, if/when I ever figure out how to actually access whatever it is (of the smaller elements) I'm supposed to access... however I'm supposed to do it.  One issue, already, with Canvas, though...  It doesn't support animated GIFs, which I need in this particular case (...although I'm going to try a few things to see if I CAN actually do those animated elements via GSAP/Canvas... might work...).

[GreenSock]

Maybe it would help to separate things into buckets conceptually:

 

Rendering layer

This is like the structure of the visual stuff you see on the screen. Most people use standard DOM elements for that on web sites (<div>, <span>, etc.) and CSS is what styles things. The rendering layer handles painting the pixels to the screen. Canvas is one option here, as is SVG - both are technically DOM elements too, but their "insides" are different. 

 

Animation layer

Animation is basically just changing properties really fast. That's it. GSAP is purely animation layer - it is agnostic when it comes to the rendering layer. It doesn't care of the objects you're tweening are DOM elements, SVG, or generic objects that you're using to draw to canvas. There are a bunch of headaches related to building an animation layer that you've probably seen in various articles, like a requestAnimationFrame loop, easing, managing timing, isolating numeric parts inside strings, blah, blah. That is what GSAP is for. 

 

It just kinda sounded like you were under the impression that GSAP magically did a bunch of rendering layer stuff or that there was some deep integration with canvas. Nope. And that's by design. We wanted it to be super flexible, and not too deeply tied to a particular rendering technology (like CSS animations).

 

Good luck with the project!

[OSUblake]

2 hours ago, ladlon said:

It seems the material on GSAP doesn't mention Canvas much, and the Canvas material doesn't mention GSAP much... I understand and am comfortable with GSAP... and am 'familiar' with Canvas... the blank area for me is how the two interact.

 

There isn't going to be a lot of material on canvas because GSAP has no concept of canvas. You have to understand what gsap is. At its core, all gsap does is change numbers on objects. 

 

Create an object with some properties you want to animate. The names don't matter. Animate that object with gsap. On every animation frame (ticker), redraw the canvas using the updated values from the object. This moves a box back and forth.

 

 

I'm logging the value out so you can see it change. I'm using that value to control the x position of a box.

 

See the Pen 339b03f5f02b8b39966c92f253e7fad0 by osublake (@osublake) on CodePen

 

 

2 hours ago, ladlon said:

I always thought SVG was a vector format.

 

It is vector, but you can also use regular images inside.

 

Think of SVG as being like canvas, but on easy mode.

 

[ladlon]

Could you show me the same codepen demo of the moving cube, but with an image, though?  That's what I'm trying to figure out.

 

I know how to do animations with 'plotted canvas shapes', but to do it with an image, you would use drawImage()... but I don't get how you reference BOTH the source image and the various properties of that source image... since, the drawImage() seems to use an object name as the target, rather than a class or ID.  Seems like you would still define an object, as you did with the canvas shapes, but would have to add the source of the image as one of those properties... or what?  I've tried a few variations of that, but can't seem to get it to work.

 

Please show me using an external png image as the animated element.

[OSUblake]

The best place to look is MDNs docs. Image can be a bunch of different things. 

 

 

It shows 2 different ways to use an image. There are of course more, as shown above.

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

 

See the Pen bfbb1a373f41b57879468dd65d889109 by osublake (@osublake) on CodePen

 

 

 

[ladlon]

Yes!  There we go.  That's what I was after.

Ya, I've been reading the MDN docs.  It's actually open in front of me as we speak.  I understood the drawImage command, but couldn't figure out how to have both the image source and the image properties referenced by it.  I was trying all variations of IDs, Classes, in quotes, not in quotes, etc.

 

One of the differences between my (latest) attempt and your codepen demo was that was trying to store an <img> (that was on the page) into a variable via the getElementById(), so that (theoretically) the drawImage() command could use it as it's target (since it seems to use object names, rather than class/ID names.

 

I previously did try the .src attribute of the object, as you have in your demo, but that didn't work for me either... most likely some other factor was messing things up, so even though I got THAT part right, I didn't realize it, as the image wasn't showing up.

 

Okay, let me give that a try over here.  That's definitely what I was after.  Thanks.

[OSUblake]

7 minutes ago, ladlon said:

I was trying all variations of IDs, Classes, in quotes, not in quotes, etc.

 

drawImage doesn't work with strings. You have to a reference to the actual element if it's in the DOM.

 

See the Pen e141cef8b49d573cd001ea08c91f026e by osublake (@osublake) on CodePen

 

[ladlon]

Yup, that's what I figured when I saw the lack of quotes... but, at that point, I was desperately trying any combo of things.

The code makes sense.  I just have to see if it works on my side (which is what I'm currently doing).

Who knows... maybe there's some other factor that is also messing it up over here.

[OSUblake]

Just now, ladlon said:

Who knows... maybe there's some other factor that is also messing it up over here.

 

Just make sure the images are loaded before trying to draw them. I'm doing that in both of my demos.

[ladlon]

Odd, I just tried literally pasting your code as is (except for changing the img link), and nothing is showing on the canvas... so maybe my theory that something else (outside of that code) is amiss....

 

I WAS getting things appearing on the canvas previously, and it is showing up (..I applied some styling so it would be visible).

 

I have to go through the entire page code and see if something is mistyped or missing.  Seems correct, but obviously something has to be wrong here.  Normally, the first thing I'd think is that my PC itself is either blocking or incompatible with it... but it has worked previously (yesterday).

 

Okay, let me tear things apart over here.  The important thing is I now have the proper coding available to me.  Thanks.

[ladlon]

Okay!  It put up a really good fight,.... but after several tries and redos, I got it showing up.  The image shows and animates back and forth.

 

Awesome.  That's finally nailed.

 

Now, I still have to do a bunch of other tests, as far as having multiple images, seeing how the animation reacts in a responsive environment, animating other properties, etc... But, this is a huge win.  Thanks for your help with that.  I'm sure I'll be back shortly...

 

[OSUblake]

Hard to say without seeing the problem.

 

Might need to use a server, and if the image isn't local, you might get cors issues. Sometimes can be fixed doing this.

 

If using img element, add crossorigin.

<img id="img" src="https://assets.codepen.io/106114/dog.png" crossorigin="anonymous">

 

Or.

var img = new Image();
img.crossorigin = "anonymous";
img.src = "https://assets.codepen.io/106114/dog.png";
img.onload = init;