Animation - Typing Text

2,107 views
Skip to first unread message

Dennis Lubsch

unread,
Nov 7, 2014, 7:05:38 AM11/7/14
to gwd...@googlegroups.com
Hello,

is it somehow possible to animate the typing of text?

Like:

Start Point:    "Hello"
End Point: "Hello - How Are You?"

So the animation shall display the typing for " - How Are You?"

Thank you,
Dennis

Mariko Ogawa

unread,
Nov 11, 2014, 1:13:55 PM11/11/14
to gwd...@googlegroups.com
Hi Dennis,

I can think of a couple of ways to animate text and maybe you can try to see if any will work to achieve what you want.

One way would be to create a text layer:Hello - How Are You?, then draw a div, which should add a layer above the text. Color the div with the same color with a canvas background color, then make animation for the div.
For the 1st keyframe, place the div to completely cover the entire text, and for the last keyframe, place the div to the right outside the canvas, so that the whole text completely appears.
In this way, when you run animation, text doesn't move, but the mask (div) animates, which will make the text disappear and reappear.

Another way would be to type each letter separately to create individual layers. Make animation for each text layer, by applying opacity 0 to the first keyframe and opacity 1 to the last keyframe.
Make sure to use animation delay, so that each letter starts animating at a different timing. To do so, just drag the first keyframe towards right.
This might be a tedious workflow but you have more control over how the text appears in animation. 

I hope this helps,

Thanks,
Mariko (GWD team)

me...@tangibleplay.com

unread,
Sep 10, 2015, 9:17:03 PM9/10/15
to Google Web Designer beta
How do you get it so it doesn't ease in but immediately appears as it does when you type?
Reply all
Reply to author
Forward
0 new messages