Jump to content
Search Community

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

Usama Khalid test
Moderator Tag

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

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

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

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

  • 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.
×
×
  • Create New...