Since you are using a staggerFrom() to drive you typewritter, its possible to use an onStart callback to call a function each time a letter is revealed. However the trick is applying those values to the cursor at the right time. This can be achieved by some pretty basic jQuery methods like offset() and width(). You just have to use a little JavaScript or jQuery to figure out the position of the current character (left and top) and then the width (to position the cursor along the right edge). The meat of this challenge (placing the cursor ahead of the character that was just typed) isn't really related much to GSAP. It also reveals how some techniques can blow up in your face if you don't think of all the ways you need your animation to run / behave. This is an interesting challenge that reveals how useful and flexible the GSAP API is.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |