Jump to content

how to identify individual characters using splitText

Recommended Posts


Simple question that I can can't seem to find the answer for in the docs.

I want to split a word into characters and animate each character individually to a spot, but I cannot find the syntax to identify them individually, from what I gather they are stored as an array..


I have

    var mySplitText = new SplitText("txt1");

    TL.to(mySplitText.chars, 0.5, {x:150, ease:Back.easeOut}) 


But rather than shift all the characters by 150px to the right I want all the character to condenses to the same point at x=150

Thanks in advance.


Share this post

Link to post
Share on other sites

You could just figure out the offset between each character and your target spot and animate x/y accordingly. Here's an example where I have a #target <div> that serves as our target coordinates and I use getBoundingClientRect() to do the offset calculations: 


See the Pen Oogboe?editors=1010 by GreenSock (@GreenSock) on CodePen


var split = new SplitText("#text", {type:"chars"}),
  chars = split.chars,
  targetBounds = document.querySelector("#target").getBoundingClientRect(),
  i, bounds;

for (i = 0; i < chars.length; i++) {
  bounds = chars[i].getBoundingClientRect();
  TweenMax.to(chars[i], 1, {
    x:(targetBounds.x - bounds.x) - bounds.width / 2, 
    y:(targetBounds.y - bounds.y) - bounds.height / 2, 
    delay:i * 0.1


Of course you can set visibility:hidden on that #target and position it wherever you want, or use hard-coded coordinates.


Does that help? 

  • Like 6

Share this post

Link to post
Share on other sites

I'd certainly recommend what Jack has done in his answer, but another way to do it would be setting the SplitText divs to position:absolute and animating the left position.


See the Pen JaJbWy by PointC (@PointC) on CodePen

This isn't as versatile and animating x/y instead of left/top is usually preferable, but depending on your animation, this could work too.


Happy tweening.



  • Like 7

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.