superasn Posted November 26, 2019 Share Posted November 26, 2019 Hi, Trying GSAP again after a long time and I wanted to create a scribble text animation (see my codepen). The basic idea is to make it look as if the pen is writing the text (no SVG just normal font). Also in case there is more than one line, then underline the text. I just kept hacking at the code until I saw something usable but it's very messy. Also the animation is just okay I guess. Would appreciate your tips and feedback. Thanks! San See the Pen NWWZdYv?editors=1010 by superasn (@superasn) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 26, 2019 Share Posted November 26, 2019 Hey superasn, good work! Overall your approach is good. A few notes of things I'd change: I'd use GSAP's .set() method instead of jQuery's .css() method because it's more convenient. Instead of using $(lines[j]).find("div.char") you can just use sp.chars because SplitText has that information already. I'd use GSAP's x and y instead of top and left because they make use of transforms which perform better. (not included in demo) I'd switch out jQuery for just plain JavaScript. (not included in demo) I'd use GSAP 3 instead of GSAP 2. With those changes: See the Pen VwwJMqq?editors=0010 by GreenSock (@GreenSock) on CodePen 1 1 Link to comment Share on other sites More sharing options...
superasn Posted November 27, 2019 Author Share Posted November 27, 2019 Hi Zack, Thanks for the tips and improvements, that's exactly the kind of advice I was looking for! I'll try to remove jQuery and switch to v3 too. I think the animation is quite usable now. Regards, San 2 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