Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
LeoZ

Create typewriter effect for textarea placeholder text

Recommended Posts

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

Link to comment
Share on other sites

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

 

 

  • Like 3
Link to comment
Share on other sites

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)?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

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