[Scribbling text animation (first attempt)]

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

[Scribbling text animation (first attempt)]

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

[Please give me feedback on this animation]

36 minutes ago, Shaun Gorneau said:

Hi @superasn,

 

The reason for the stutter in the plane movement is that it's jumping a set number of pixels rather than tweening a set distance over a set time. Have a look here to see one way to tackle this and to allow everything to smoothly get into position.

 

 

 

Wow that's amazing.. it looks much smoother now, especially the text fade underneath! thanks for the help!

[Please give me feedback on this animation]

21 minutes ago, leolo69 said:

Maybe it would look nice if the letters were to resize from a smaller size to the end size.

Also using e.g. three planes which fly staggered could be some idea. So the animation doesn't take that long to finish and you get some more action

 

Just my two cents.

 

Thanks, that's very good feedback!  I will try this? ...also tried to use an animated gif with smoke which is also looking good

[Please give me feedback on this animation]

This is using the onUpdate method. I think it looks better than the first!

 

See the Pen EzMGLq by superasn (@superasn) on CodePen

[Please give me feedback on this animation]

I'm new to GSAP but based on the video tutorials I'm trying to create an simple text effect

 

 

Basically I'm trying to reveal the text like it's being drawn by an airplane (see my codepen)

 

It's working but I don't think it's looking very smooth. Maybe I should not animate the plane and just position it using the "movePlane" function?

 

Your feedback is appreciated.

 

P.S. Sorry about the ugly code (I'm very new to this) ?

See the Pen vwPQQB by superasn (@superasn) on CodePen

[Collection of text effects based on GSAP SplitText?]

Hello Jonathan,

 

Thanks so much for the reply.

 

I wish there were some ready made text effects to plug and play. So far I've managed to find about 12 examples of text effects using SplitText on codepen so at least I have a starting point now. 

 

Also thanks for the resources. I'll learn more to see if I'm able to create my own text effects using these easing libs.

 

Regards,

San

[Collection of text effects based on GSAP SplitText?]

I'm amazed with the SplitText library and I was wondering if there is a collection of already made text effects I can use with it?

 

I mean like http://textillate.js.org/ (which is based on animate.css) and offers inbuilt effects like swing, wobble, tada, etc.. Is there something for SplitText too?

 

I know I can write them myself but I'll never be able to create something professional like the demo animations or the textillate type animations.

 

I've tried codepen, github, codecanyon, etc but couldn't find anything..

 

Anyone know if something like this exists?

 

Cheers!

San