Jump to content


splitText on a form's placeholder text

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

Does anyone know how to get a form's 'placeholder' text to respond to GSAP splitText ? It is working if I change my selector to an h1 tag, as a test--but I can't seem to select the placeholder text from a form field to perform splitText on that element.

See the Pen akLGXo by celli (@celli) on CodePen

Link to comment
Share on other sites

Hey celli :)


I'm not sure if you can do that or not. The placeholder text is an attribute of the input element so that may not be something SplitText can work with. I know you can access it via the AttrPlugin like this:

TweenMax.set(document.querySelector(".innershadow"), {attr:{placeholder:"Some new text"} })

But I'm not sure if you can have SplitText do anything with that attribute. Just for the heck of it I tried:

var elAttr = document.querySelector(".innershadow").getAttribute("placeholder");

and fed that into SplitText, but got an error. Someone smarter than myself may have a way to do it.


Happy tweening.


  • Like 2
Link to comment
Share on other sites

thanks for the effort PointC !

Link to comment
Share on other sites

Yes, SplitText is intended for splitting the text inside DOM elements, not attributes.

Keep in mind that SplitText wraps text in <div> tags and it would not be appropriate to do that to an attribute. 


Perhaps there is something we can suggest if you explain the type of effect you are going for.

If you just want the text to appear with type-writer type effect maybe you could use a TextPlugin tween on a hidden element and use an onUpdate to populate that attribute. 


I imagine for any decent type of animation you'd be better off just overlaying a div with text on top of that form field.

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