Jump to content
Search Community

Fake Typewriter effect - non intended delay on start

Tasty test
Moderator Tag

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

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