Jump to content
GreenSock

Usama Khalid

Which Canvas Library i should be using for GSAP text animation?

Recommended Posts

Hi,
I want to create text animations (typewriter, fade words etc) in Canvas and then get each animation frame to create a video of it.

So i want to know which Canvas library i should be using with GSAP?

Three.js or PIXI.js and what's the reason behind it? i'm currently using FabricJS

Thanks,

Link to comment
Share on other sites

Use whatever is the easiest for you, and fits your needs.

 

  • Like 4
Link to comment
Share on other sites

I saw @OSUblake claim this thread  (obviously the word canvas pulled him in like a moth to a flame) and figured I'd stop by later and read the answer thinking it would take an hour or two. Anyway, I thought I was about to read a detailed analysis and review of every possible canvas library plus a bunch of cool demos. All I got was one sentence. :D

 

giphy.gif

 

 

  • Like 1
  • Haha 2
Link to comment
Share on other sites

1 minute ago, PointC said:

Anyway, I thought I was about to read a detailed analysis and review of every possible canvas library plus a bunch of cool demos. All I got was one sentence. :D

 

Hehe. Well, the question was about converting a canvas animation to video, so I don't think it should really matter as long as it looks like what you want.

 

I mean, you can definitely make cooler effects with WebGL (PixiJs and Three.js), but they don't really do native text. It's drawn on a regular canvas first. And the animation descriptions in the OP seemed pretty basic, fade, typewriter effect, etc, which shouldn't be hard to do with a normal canvas library like fabric.

 

 

  • Like 2
Link to comment
Share on other sites

I totally missed the video requirement when reading that and was wondering why the need for canvas for such basic things. But I too was expecting pure bliss from reading what Blake was writing. Curious, whats the process to video? Are you're going to output each frame as a up-scaled image then downsize and compile the sequence to video? ¯\_(ツ)_/¯

Link to comment
Share on other sites

7 minutes ago, Shrug ¯\_(ツ)_/¯ said:

Curious, whats the process to video?

 

Canvas is an image... or you can convert an svg to an image. Create image for every frame, kind of like here.

http://plnkr.co/edit/oZjPbgo9hvqwUYEV7RLi?p=preview&preview

 

There are libraries that can already do that though.

  • Like 1
Link to comment
Share on other sites

Yeah thats cool, I think I've seen that before or something you did which is similar (you've done a lot of awesome canvas/svg conjunctive creations). I was assuming the OP was talking about creating an actual video file. So thats why I was wondering what the process was given resolution etc., come into play.

Link to comment
Share on other sites

1 minute ago, Shrug ¯\_(ツ)_/¯ said:

I was assuming the OP was talking about creating an actual video file. So thats why I was wondering what the process was given resolution etc., come into play.

 

Yeah, a video is basically the same process I did above for the animated gif. Can't really make a video in a codepen-like environment. The resolution is whatever size you make the images/frames. 

  • Like 1
Link to comment
Share on other sites

Thats why I mentioned above about up-scaling then down-scaling to try to create acceptable resolution in video from the web. I was just curious if there was some process I was unaware of as it can be tricky depending on the desired outcome.

Link to comment
Share on other sites

This the process for creating a video (.mp4)
Get each animation frame to DataURL or blob. Use FFMPEG to create a video from that blob. 

I thought GSAP Splittext thing works on Canvas as well using Three.js aur PixiJS, but found out that it works only for DOM. :(
Yeah, we can create all those animation using FabricJS or any other canvas library. I thought GSAP would save my time and it will quicker.
 
 

Link to comment
Share on other sites

On 3/19/2020 at 3:27 AM, OSUblake said:

 

Hehe. Well, the question was about converting a canvas animation to video, so I don't think it should really matter as long as it looks like what you want.

 

I mean, you can definitely make cooler effects with WebGL (PixiJs and Three.js), but they don't really do native text. It's drawn on a regular canvas first. And the animation descriptions in the OP seemed pretty basic, fade, typewriter effect, etc, which shouldn't be hard to do with a normal canvas library like fabric.

 

 

Yeah, but later on need some complex animations as well. Like Reveal text, text highlight etc.
 

Link to comment
Share on other sites

11 minutes ago, Usama Khalid said:

I thought GSAP Splittext thing works on Canvas as well using Three.js aur PixiJS, but found out that it works only for DOM. :(

 

SplitText is kind of pointless for canvas. Just use text metrics to get the position of a letter.

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

 

 

  • Like 4
Link to comment
Share on other sites

  • 2 years later...

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.
×