Create typewriter effect for textarea placeholder text

[LeoZ 12 Likes (Newbie)]

Hey Tweeners, I was wondering is it possible to create typing effect for placeholder text without using "SplitText"? If yes how to set textarea placeholder as target in tweenmax function. I have tried  but it's showing null target. Anyone can explain why?

See the Pen PQGJEE by LeoZoe (@LeoZoe) on CodePen

[Shaun Gorneau 1,503 Likes (Superhero)]

You can do something like this ... 

 

See the Pen LQROBm?editors=0011 by sgorneau (@sgorneau) on CodePen

 

[Carl 9,066 Likes (Superhero)]

TextPlugin will work too:

 

See the Pen zRKpGW?editors=0010 by GreenSock (@GreenSock) on CodePen

 

TextPlugin is available for everyone, its not a Club plugin. You do need to load it in addition to TweenMax

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/plugins/TextPlugin.min.js

 

 

more info: https://greensock.com/docs/Plugins/TextPlugin

 

 

[Shaun Gorneau 1,503 Likes (Superhero)]

17 minutes ago, Carl said:

TextPlugin will work too

 

@Carl, is it true that TextPlugin would work on the placeholder attribute (not just the DOM text)?

[Carl 9,066 Likes (Superhero)]

TextPlugin only works on the html text. You could tween some hidden text and use an onUpdate callback though to put that text wherever you like.

[Shaun Gorneau 1,503 Likes (Superhero)]

19 hours ago, Carl said:

TextPlugin only works on the html text. You could tween some hidden text and use an onUpdate callback though to put that text wherever you like.

 

OK, I asked to help clarify for the OP ( @LeoZ ) because his initial question was about a typewriter effect on the placeholder attribute text. Just wanted to be sure I haven't missed some new development with TextPlugin

 

Thanks @Carl!