Jump to content
GreenSock

glassbean

how to identify individual characters using splitText

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

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.

 

Link to comment
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
Link to comment
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
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

  • 2 years later...

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

Link to comment
Share on other sites

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

 

Happy tweening. 

:)

 

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