how to identify individual characters using splitText

[glassbean]

Hello,

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.

 

[GreenSock]

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? 

[PointC]

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.

 

[GreenSock]

Simple and clever, @PointC! Thanks for offering an alternative solution.

[glassbean]

Thanks both for the replies really useful.

[NubieHere]

Yeah, but would still be nice to see the answer to the question: How to identify individual characters ... I need way more control over each letter in many cases that gsap algorithms wouldn't be able to provide due to specifics ; )

[PointC]

@NubieHere I think this thread may give you some ideas.

 

Happy tweening.