Jump to content

Tasty Sites

Fake Typewriter effect - non intended delay on start

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! :D

Today had some fun animating a lot of stuff, one of them was "typewriter effect" - the thing is it's SVG and it's in perspective, so I thought this can be faked with some Stepped ease and pathDataToBezier, there are 7 letters so I eyeballed a path for separator did some heavy math (lol) and thought it will work. It almost does.

That's my final a bit clunky effect

See the Pen QaNZdO by tastysites (@tastysites) on CodePen

And that's the "clean" version

See the Pen mpPzmE by tastysites (@tastysites) on CodePen

But the question is why the stagger for #keyword > path does not start at the same time as the #separator? It looks like there's some "blank timeline space".
I encountered this problem few times and I would love to know what I'm doing wrong here - any suggestion will be much appreciated.

Thanks !

Link to comment
Share on other sites

Thanks @lennco!

I feel a bit stupid - less is more.;) 
Thank you for the options, visibility one suits me best. Good to know I can actually set the start of the separator to -1, now it looks quite smooth.
Happy Tweening! 

  • Like 1
Link to comment
Share on other sites

Hello @Tasty Sites


Here are 2 other ways of doing a typewriter effect in GSAP:


This animates CSS width using steppedEase


See the Pen LbPNvK by jonathan (@jonathan) on CodePen


And this animates CSS opacity (autoAlpha) using steppedEase:


See the Pen avXdvw by jonathan (@jonathan) on CodePen


Happy Tweening :)

  • Like 4
  • Thanks 1
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.