Jump to content
GreenSock

dazzafact

GSAP Text Animation with Canvas

Recommended Posts

Here's a trick how you Animate Canvas Text (no HTML) using GSAP (+PixiJs)
its just an 15-minute- Code Snip. iam sure it can extend for using words and also Lines.
The advantages of animations are, that you can convert them to videos in the browser in seconds.
(to the Admins: Whould be cool if you can include Canvas Text Animation also to your offical TextSplit Plugin)

See the Pen eYyroYw?editors=1111 by dazzafact (@dazzafact) on CodePen

  • Like 1
Link to comment
Share on other sites

  • dazzafact changed the title to Text Animation with Canvas
  • dazzafact changed the title to GSAP Text Animation with Canvas

Its not nessesary to use NodeJs to render Videos. You can use Javascript in Browser to do that. for example:  new WebMWriter() or MediaRecorder()
No installation required

  • Like 1
Link to comment
Share on other sites

You won't get the same quality though, this is progressing the timeline frame by frame, taking snapshots and then stitching them together.

Link to comment
Share on other sites

On 4/9/2022 at 3:15 PM, Cassie said:

You won't get the same quality though, this is progressing the timeline frame by frame, taking snapshots and then stitching them together.

 you can do it also smooth in Browser, frame by Frame. Using Client CPU 😎. (Not Server)
Just  use GSAP Seek() to capture each Frame and save all chunks for final MediaCreate  (webM,etc)
 

 $tl =gsap.timeline({paused:true});
$app = new PIXI.Application({})
$renderx=0
chunks=[]
function animate(){
if($renderx>600){return); // Duration
                 
$tl.pause()
$fps=30
$sec=(1/$fps)*$renderx ||0;
$tl.seek($sec);
 $app.renderer.render($app.stage);
chunks.push($app.view.toDataURL("image/webp", 0.50));
$renderx++;
window.requestAnimationFrame(function(){
            animate()
        });

...

}

var blob = new Blob(chunks)
    // do something with this blob
  var vidURL = URL.createObjectURL(blob);
  var vid = document.createElement('video');
  vid.controls = true;
  vid.src = vidURL;
  vid.play()

 

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