Jump to content
Search Community

Typing animation w/ SplitText

flysi3000 test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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.

 

  • Like 3
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.
×
×
  • Create New...