Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Luckyde

Published my library I built to animate GSAP on Canvas!

Recommended Posts

Hey all I wanted to share this with you! 

 

ElCanvas:

https://github.com/luckyde/elCanvas

I spent 6 months on a canvas library which I built around gsap and I wanted to share it here!

 

I wanted to create a library which I can use to animate in Canvas and still use objects, so I spent a while trying to create a layer of seperation and this is what I got!

 

The TLDR is now instead of drawing a rectangle on the canvas, then redrawing it with a bunch of ctx commands I can do this:


 

var myRectangle = new el.rect({width:30,height:30}); 

el.update();

 

And If I want to animate it i can put a setInterval or since I use GSAP I would do

 

TweenMax.to(myRectangle,1,{width:60,height:60,rotation:90, onUpdate: el.update}) 

 

So the whole goal of this as I'm hopefully explaining here is to DOM-ify canvas commands like rectangle,circle,customshapes,text and more so that its extremely easy to draw on a canvas context and animate in it! The reason is because DOM animation and SVG animation started to lag hard on the game I'm working on but canvas worked great on all devices! I'm not allowed to use huge libraries like pixie or phaser so I thought I would make a mini library that just does what I need it to do!

 

Supported objects at this point

Quote
rect() rectangle type
circle() circle type, supports radius for size
text() text type
image() image type, image needs to be preloaded first, passed into ID e.g. {id:'test'}
ine() basic line , uses x1,x2,y1,y2 e.g. pass in {x1:0, y1:0, x2: 100, y2: 100}
quadLine() shorthand for quadLine e.g. pass in {x1:240,y1:240,qx:-50,qy:-50,x2:200,y2:150}
shape() custom shape, pass in custom shape data, see below for example

 

supported properties at this point

 

Quote
Property Support
x,y yes
top, left no
scale yes
scaleX, ScaleY yes (But only if NOT animating scale, and vice-versa)
rotation yes
opacity yes
skew no
parent yes(specifiy only another el object)
globalcompositeoperation yes
transformOrigin only percent values, width/height must be specified
zIndex yes (Only on creation)
radius yes, also takes individual sides e.g.,radius:{tl:20,tr:0,bl:2,br:40}

 

Examples!!! 

 

Parenting / Character animation:

http://thisgoodboy.com/elCanvas/_tests/SoloBot_intro/

 

Logo Animation:

http://www.thisgoodboy.com/elCanvas/_tests/_word_seeker_logo/

 

Text animation (CLICK on the gray space over and over for different animations):

http://www.thisgoodboy.com/elCanvas/_tests/el_canvas_30points_v3/

 

Particle effects using canvas blend modes:
http://thisgoodboy.com/elCanvas/_tests/FF_board_clicker/index_manual.html

 

Using images/shapes/custom shapes

http://thisgoodboy.com/elCanvas/_tests/bot_message_waiting_for_oponent/

 

Once again without GSAP and it's ability to modify objects optimally and with precision none of this would be possible :)

I really hope this is useful to someone else too!

  • Like 6

Share this post


Link to post
Share on other sites

If you want Blake to appear you have to say the magic word three times in a row.

 

"canvas canvas canvas"

  • Like 2
  • Haha 2

Share this post


Link to post
Share on other sites

I'll take a look at it next week. I'm traveling right now. 

 

Luckyde, I'll also respond to your PM when I get back next week. 

  • Like 4

Share this post


Link to post
Share on other sites
2 hours ago, OSUblake said:

I'll take a look at it next week. I'm traveling right now. 

 

Luckyde, I'll also respond to your PM when I get back next week. 

No rush on that, its more of a work related question.
elCanvas is more work and passion project too :)
I am also working on a converter that imputs svgs and outputs them as canvas code, when i get time off i hope to develop it more so people can convert svg assets to pure canvas with this and animate then in gsap :D

 

giphy.gif

  • Like 3

Share this post


Link to post
Share on other sites

Thanks for sharing @Luckyde.

 

Nice job, congrats on your efforts and the release of elCanvas. The converter sounds interesting also, I've messed around with that myself >< both ways.

 

At a glance some aspects remind me of the TweenCanvas library, which didn’t get much fanfare (except a singular like from OSUblake ;--) when posted here. https://greensock.com/forums/topic/6076-html5-canvas/?tab=comments#comment-79286

 

I’m looking forward to hear @OSUblake's feedback on things once he concludes his "Planes, Trains and Automobiles" excursion. Be safe out there.

  • Like 1
  • Haha 1

Share this post


Link to post
Share on other sites

Thanks @Shrug ¯\_(ツ)_/¯ !

That's pretty neat yeah mine is similar, I added a lot of support and open mess for canvas calls and all built in canvas functionality e.g. you can can set canvas blend modes, make custom shapes , as well as things like parenting which allow character animation , transform origin points and chaining canvas commands so the overall code is way shorter.  if it doesn't get huge traction it's all good with me I'm using it on words with friends for Facebook so I'm gonna keep updating it as long as I'm working here at least!

 

And past this I'm hoping to keep using this because of the small file size for banner projects 

  • Like 3

Share this post


Link to post
Share on other sites

The character animation aspect sounds cool for sure, especially coupled with the SVG to Canvas, that might be another viable workflow for animators using GSAP. I saw you're a technical animator so you certainly have insight into workflow into those aspects. Keep up the good work, nice job and thanks for sharing!

  • Like 2

Share this post


Link to post
Share on other sites
14 hours ago, Luckyde said:

I'm using it on words with friends for Facebook

 

You work on Words with Friends? I know someone who works on that as well. His name is Daniel Tavares. If you know him, poke him on the ribs for me, please. Tell him it's from Pedro. He'd better know who Pedro is.

  • Like 1

Share this post


Link to post
Share on other sites

Update: I added SVG to Canvas support! :D
Example:


See the Pen pMrgwz by LuckyDe (@LuckyDe) on CodePen

 


You can now use straight svg point data and if you have the morph plugin you can also morph data and its in canvas!

I took @OSUblake 's post

implemented it into my library but I also added 
https://github.com/goessner/parseSvgPathData

modified that so you dont need to use path2D so it works in IE
I also added a cache system so on every frame if the path data is the same as the old one it wont update the for loop to convert it, it will just run the same draw function.

So now you can add svgs like this 

 

  var hat_dark_p = "M58.2,81c0,0-3.1-29.6-3.5-75.4c0,0,73.2-18.9,141.5,12.3l-10.6,71l55.5,16.4c0,0-75.4,58.9-241.2-15.1L58.2,81z";

  var hat_dark = new el.svg({points:hat_dark_p,style:{fillStyle:"#1e3449"}})

 

and animate it like any other element - skew, scale, xy , etc

 

And if you want to use the morph plugin you can just do

var hand_l_p= "M0,105.3l27.8-77.9L42,53.7c0,0,13.8-23.2,50.2-53.7c0,0,38.9,76.2-37.5,129.5c0,0-5.9,3.8-12.1,7.2C34.2,141.3-0.6,134,0,105.3z"
var hand_l_b_p= "M0,80.8l53.5-66.9l-1,24.8c0,0,25.8-23.8,64.4-38.6c0,0,14.2,51.7-62.3,104.9c0,0-5.9,3.8-12.1,7.2C34.2,116.7-0.6,109.5,0,80.8z"
var hand_l_shapes = [hand_l_p, hand_l_b_p];
MorphSVGPlugin.pathFilter(hand_l_shapes);

var hand_l = new el.svg({points:hand_l_shapes[0],style:{fillStyle:"#58cfcb"}})

TweenMax.to(hand_l,1,{points:hand_l_shapes[1],onUpdate:el.update})

 

Screen-Shot-2019-08-01-at-1.29.40-PM.jpg

  • Like 6

Share this post


Link to post
Share on other sites
On 8/1/2019 at 1:29 PM, Luckyde said:

I took @OSUblake 's post

 

Nice! I'm glad somebody found my post useful.  😁

 

It's worth noting that @GreenSock just added canvas support to the latest version of the MorphSVGPlugin. Woo Woo!

 

Check out the MorphSVGPlugin docs:

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

 

And this demo:

See the Pen WYWZab by GreenSock (@GreenSock) on CodePen

 

 

 

BTW, I'm still out of town, so I haven't had a chance to check out your library, but it's #1 on my todo list. I love seeing how other people use canvas with GSAP. 

 

  • Like 1

Share this post


Link to post
Share on other sites

Hey @Luckyde

 

I'm still out of town... applying for a new job, but that's not important. I could have sworn that you replied to my last post, but I don't see it anymore. I just wanted to make sure that something didn't go wrong on GSAP's end. We are in the middle of upgrading the forum software here, so it's possible that your last post might have deleted by accident.

 

 

  • Like 2

Share this post


Link to post
Share on other sites
On 8/11/2019 at 3:38 AM, OSUblake said:

Hey @Luckyde

 

I'm still out of town... applying for a new job, but that's not important. I could have sworn that you replied to my last post, but I don't see it anymore. I just wanted to make sure that something didn't go wrong on GSAP's end. We are in the middle of upgrading the forum software here, so it's possible that your last post might have deleted by accident.

 

 

Hey dude, I was just worried about publishing full code online since its not fully live yet for work, but vids are fine :) Heres some more things i made with the svg plugin hooked onto it

 

http://zwf-instant-internal.s3.amazonaws.com/shared/lucky/2019/aug/doge.mp4

 

http://zwf-instant-internal.s3.amazonaws.com/shared/lucky/2019/aug/ohsnap.mp4

 

And I added the ability to automatically set the transform origin to 50% 50% for svgs by analyzing the path so I dont need to manually set the width and height. You can see the center point by enabling debug: true into the object

 

 

 Screen-Shot-2019-08-13-at-7_54.45-AM.jpg.79a24e0b7e00d4bee42e83979a215e84.jpg

 

  • Like 5

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×