Jump to content
Search Community

GSAP and Canvas

jimeast test
Moderator Tag

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've written in Gsap and for The Canvas element.  Is there any room for GSAP in Canvas or visa versa.  Are there any examples of the 2 working together?  I suppose I could use multiple Canvas elements sort of like Flash MovieClips.  I'm rambling I just want to know if there's any practical overlapping of the 2. 

Link to comment
Share on other sites

Hey @jimeast :)

 

Have you seen PIXI yet?

http://www.pixijs.com/

http://pixijs.github.io/examples/#/basics/basic.js

 

@GreenSock has even added a new plugin so GSAP and PIXI play well together.

https://greensock.com/docs/Plugins/PixiPlugin

 

If you search the forum, you'll find numerous posts by @OSUblake using canvas, Paper.js, PIXI etc. 

 

Hopefully that points you in the right direction. Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

PIXI is WebGL, but falls back to canvas if needed. It's pretty easy to get started (easier now with the new plugin) and performs beautifully. It's been the hot topic around here for some time. After Blake started talking about it more and more, Jack worked on the new plugin so we can code with PIXI while using a lot of the familiar GSAP syntax.

 

I guess a lot depends on what you're trying to accomplish with your project, but please have a look at the new plugin I linked to above and give PIXI a whirl. It's a lot of fun. Blake will probably stop by here with some mind bending info too.

 

Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

I'm sure @OSUblake will appear once he recompiles himself with new upgrades, but in the meantime I would suggest just browsing his CodePen profile (https://codepen.io/osublake/) to see what is possible with GSAP and Canvas

 

Here are a few favorites:

 

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

 

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

 

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

 

Also be sure to read this entire thread as Blake shares a lot of details about doing a whole bunch of different things with canvas:

 

  • Like 5
Link to comment
Share on other sites

11 hours ago, Carl said:

I'm sure @OSUblake will appear once he recompiles himself with new upgrades...

 

Hehe. Compilation was a success, and all upgrades are working as expecting.

 

15 hours ago, jimeast said:

I've written in Gsap and for The Canvas element.  Is there any room for GSAP in Canvas or visa versa.  Are there any examples of the 2 working together?  I suppose I could use multiple Canvas elements sort of like Flash MovieClips.  I'm rambling I just want to know if there's any practical overlapping of the 2. 

 

Maybe GSAP needs some official canvas demos because I've seen a lot people say similar things, like they are incompatible with each other.

 

GSAP works with numerical properties of objects. Canvas is more of a graphics API, and doesn't have any built-in objects to work with except for the context, so the bridge is to create your own objects.

 

var mySprite = {
  src: someImageSrc,
  x: 0,
  y: 0  
};

TweenLite.to(mySprite, 1, { x: 200, y: 300 });

TweenLite.ticker.addEventListener("tick", function() {
  
  // clear the canvas and draw your objects
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(mySprite.src, mySprite.x, mySprite.y);
});

 

 

Or you can animate the built-in objects of a canvas library.

 

// Using PixiJS
var mySprite = new PIXI.Sprite(someImageSrc);
app.stage.addChild(mySprite);

TweenLite.to(mySprite, 1, { x: 200, y: 300 });

 

 

14 hours ago, jimeast said:

Is Pixi anything like paper.js?

 

Not really. They are designed for different uses. PixiJS is for raster graphics, and Paper.js is for vector graphics. Rendering raster graphics is very fast, and can be hardware accelerated even without WebGL. Vector graphics on the other hand typically have to be done on the CPU, so there's a HUGE performance difference between the two.

 

And there's a reason you might choose one over the other. As @PointC mentioned, it's more about what you're trying to accomplish. If you're making a game, or something where performance matters, PixiJS is a good choice. Want to do some creative coding with some abstract shapes, Paper.js might be a good choice. Need something very simple and lightweight, don't use a library. It's all about using the right tool for the job.

 

That said, the demo you provided would be very easy to convert to PixiJS, so you might want to look into that. It's API is also modeled after Flash, so that might make things easier for you. Check out their examples page to get an idea of what it can do. It looks like they've add some new stuff that I haven't seen before (like the projection demos :shock:).

http://pixijs.github.io/examples/#/basics/basic.js

 

And I see they have a new filters demo too. It looks like they got everything working now. Some of those filters have been broke since v4 came out.

http://pixijs.github.io/pixi-filters/examples/

 

  • Like 5
Link to comment
Share on other sites

1 hour ago, OSUblake said:

 It looks like they've add some new stuff that I haven't seen before (like the projection demos :shock:).

 

:blink: I don't know what's happening there, but my head hurts after messing with those new demos. 

 

Thanks for pointing that out Blake. I haven't been to their site lately and didn't know they had posted new stuff. Very cool!

  • Like 3
Link to comment
Share on other sites

  • 1 year later...
On 8/29/2017 at 9:19 AM, OSUblake said:

 

 


var mySprite = {
  src: someImageSrc,
  x: 0,
  y: 0  
};

TweenLite.to(mySprite, 1, { x: 200, y: 300 });

TweenLite.ticker.addEventListener("tick", function() {
  
  // clear the canvas and draw your objects
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(mySprite.src, mySprite.x, mySprite.y);
});

 

 

 

So I tried this since I can't use Pixi and it seems that the ticker callback is left running - even after the tween is complete. How do you turn off the ticker callback?

 

Thanks

Link to comment
Share on other sites

Hey gone3d,

 

Welcome to the forums!

 

The ticker is a separate object, not connected to the tween itself, if you want to stop it from firing, all you have to do is remove the event listener.

 

From the docs:

//add listener
TweenLite.ticker.addEventListener("tick", myFunction);
 
function myFunction(event) {
    //executes on every tick after the core engine updates
}
 
//to remove the listener later...
TweenLite.ticker.removeEventListener("tick", myFunction);

 

Side note: I know you got the code from this thread, but it's always best to start your own thread for questions that are not related to the original one. It also makes it easier for others who might have the same question find what you have asked.

 

Happy Tweening!

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