Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Tasty Sites

Fake Typewriter effect - non intended delay on start

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