Jump to content

Eugene Rayner

Help understanding canvas

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

Hello there,


I've recently been exploring ways to create awesome animations and i've come across the 'canvas' element.

Now i've been looking at some articles which explain which frameworks or libraries exist out there to assist in creating animations on canvas.

But it's 2017 now - Almost 2018, what is the best framework I can use for the broader use of Canvas? I'd like to create some cool parallax backgrounds, or multilayer which move on scroll, for now anyway.


As always, any help greatly appreciated :)

Link to comment
Share on other sites

I think most folks around here are going to recommend Pixi.js for 2D and Three.js for 3D. Both work great with GSAP.


For a little background on Canvas, please see this post that @osublake was kind enough to turn into a multi-part tutorial on the subject



We have  PixiPlugin for advanced color effects: https://greensock.com/?product-plugin=js-pixiplugin

  • Like 3
Link to comment
Share on other sites

Canvas has a huge learning curve if you've never done graphics programming before, so it's probably better to start off using a 2D library like PixiJS.


Check out their examples page to get an idea of what the library is capable of.



There's also a bunch of plugins for Pixi, like filters...



And particles...



Here's a simple demo using GSAP's PixiPlugin.


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


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