glassbean

how to identify individual characters using splitText

Recommended Posts

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.

 

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: 

 

 

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.

 

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

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

  • Like 1

Share this post


Link to post
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.