This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Karol Piwowarczyk
Posted Oct 19 - Read on Facebook

Hello!

How to make animation that simulates writing?

Thanks for your help!
:)

Karol

3 Comments

Benjamin Den Boer

Hiya Karol Piwowarczyk — there are a couple of ways to go about this. It's tricky to do well, and easy to do in a hacky way. The hard (but cooler) way to do this is by looping over the characters of a word, getting the width of each character, and then fading-out layers that mask the individual letters. The easy way would be to move a large hiding layer from left to right, within a Utils.interval(). I tried the former. :-)

http://share.framerjs.com/lpg8etauzamh/

Benjamin Den Boer

German Bauer that is a much better idea. This works too!
http://share.framerjs.com/9eexcvogjv54/

Gregory J. Orton

You could also write a function that recursively calls itself and takes a deep copy of itself length-1 from the front and adds that letter to the text layer. Obvs will finish calling with string is empty.

Read the entire post on Facebook