Fake Typewriter effect - non intended delay on start

[Tasty]

Hello!

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 !

[lennco]

Hi Tasty,

 

If you remove the ease on the stagger, you can clearly see why it's delayed:

 

See the Pen XVdyKJ by lennco (@lennco) on CodePen

 

Using the 'visibility' property:

 

See the Pen RxaqGL by lennco (@lennco) on CodePen

 

Low duration stagger:

 

See the Pen PENxbe by lennco (@lennco) on CodePen

 

[Tasty]

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! 
 

[Jonathan]

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