Animate context in canvas?

[jesper.landberg]

Hi,

 

I'm experimenting a bit with Canvas, and was wondering if it is possible to tween attributes of arcs and rects (and other stuff) with GSAP?

 

What I'm trying to do in the codepen is to scale up the ctx (circle) when hovering the link, by scaling or increasing the radius.

 

See the Pen NXqjpo by ReGGae (@ReGGae) on CodePen

[Sahil]

Going to attempt to answer, though wait for Blake's response.

 

Actually context is very different, and to animate anything you will have to do it all on your own. Like in this case you will have to animate radius of circle. GSAP animates any properties of any object as long as they are numeric, so you can create objects and animate them externally.

 

See the Pen qpObLE?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

[OSUblake]

Hi @jesper.landberg

 

Nice use of mix-blend-mode! It looks like @Sahil might have got you going in the right direction.

 

The thing to understand about the canvas context is that it's more of a graphics API, so there really aren't any built in objects to animate. Whatever properties you want to animate, just make an object with those properties, and animate that object.

 

One thing to be careful about when using lerp is that it might result in a lot of unnecessary, tiny calculations (see Zeno's paradox of motion). The paradox is that you can never move to a goal because it requires an infinite number of steps.

 

 

 

Computers do have limits, so that's technically not possible, but it's usually a good idea to only lerp when the difference between the values is large enough to be noticed. So something like this.

 

var dx = mouseX - circle.lastX;

// Only lerp when the difference is greater than 0.01
// Could be any threshold, but something in the range of 0.01 to 1e-6
// should work fine for what you're doing
if (Math.abs(dx) > 0.01) {
  circle.lastX += dx * 0.25;
} else {
  circle.lastX = mouseX;
}

 

For more info about animating canvas with GSAP, here are some threads worth checking out.

 

 

 

 

 

 

 

[OSUblake]

On 12/15/2017 at 12:22 PM, jesper.landberg said:

What I'm trying to do in the codepen is to scale up the ctx (circle) when hovering the link...

 

Since you asked. Scale is a transform, and that can be really confusing if you've never messed with raw transforms before. GSAP makes transforms seem super easy, but they aren't... not by any stretch of the imagination.

 

Canvas transforms work just like SVG transforms, and use the same matrix. In canvas, there is no transform origin which can make transforms seem even more confusing. SVG really doesn't have a transform origin either. CSS adds one, but it doesn't work the same in every browser, so GSAP has to calculate it for you.

 

With canvas, you can call transformation methods, like ctx.translate(), ctx.scale(), and ctx.rotate(). Or you can set the transformation matrix in 1-shot by calling ctx.setTransfrom(). For this post I'm going to use setTransform to set the matrix.

 

An identity matrix, a matrix with no transforms, will look like this.

 

ctx.setTransform(1, 0, 0, 1, 0, 0)

 

To understand how those values are calculated is beyond the scope of this post, but as long as rotation isn't involved, you could look at the matrix as looking like this.

 

ctx.setTransform(scaleX, 0, 0, scaleY, x, y)

 

And to get around calculating the transform origin for your circle, you can just draw it centered at 0,0.

 

So here's your demo animating scale instead of radius. I'm using Path2D because it's easier... and fun, but it won't work in IE. Google does have a polyfill for it, but it doesn't work good. One of these days I should just write my own polyfill.

 

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