flysi3000 Posted July 16, 2021 Share Posted July 16, 2021 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 More sharing options...
OSUblake Posted July 16, 2021 Share Posted July 16, 2021 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. 3 Link to comment Share on other sites More sharing options...
flysi3000 Posted July 17, 2021 Author Share Posted July 17, 2021 Aha, I think that was the part I was missing - how to grab the current target. Thanks, I’ll give this a shot! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now