Typing animation w/ SplitText

[flysi3000 62 Likes (Contributor)]

I feel like this has to have been asked before, but if so, I can't find it. I'm trying to replicate a text typing animation, with a blinking cursor (or insertion point) that follows the text. Animating character by character with SplitText is easy, but does gsap expose a property where I can I figure out the position + width of the current character, and position my blinking "cursor" relative to it? Or am I approaching this in the wrong way?

 

Thanks y'all!

See the Pen JjNNJbg by flysi3000 (@flysi3000) on CodePen

[OSUblake 18,476 Likes (Superhero)]

You could precalculate everything by looping through all your chars and build a timeline in that loop. Or if you just want to set it dynamically, you can get the current char like so, and do whatever measurements you want.

 

const typing_text = gsap.timeline()
  .from(split.chars, {
  duration: .01,
  autoAlpha: 0,
  stagger: {
    each: .05,
    onStart() {
      let target = this.targets()[0];
      console.log(target.offsetLeft + target.offsetWidth)
    }
  }
});

 

👆

Not saying those are the values you should use, just that you can grab the current target like that.

 

[flysi3000 62 Likes (Contributor)]

Aha, I think that was the part I was missing - how to grab the current target. Thanks, I’ll give this a shot!