5+1 Hype in Animated Text Effects

Template Gallery
1

This is for those that don’t want to rely on external .js libraries Im going to be adding more to this template.

Text Effects.zip (83.0 KB)

6 Likes
2

Nice! Great work.

3

Ditto!

4

anim text.hype.zip (13.6 KB)

5 Likes
5

You do have a feel for good timing! And we need those advanced color grades… discussed a while back.

1 Like
6

Yep, timing is crucial for nailing a specific effect. Yea I thought gradient were going to be part of Hype 4 but :disappointed: but I guess post 4 wouldn’t hurt.

1 Like
7

So maybe these would work as a template by putting each effect in a single symbol.

Use the Symbols name to determine the actual displayed letter.

Example

Spring Up Rotated In_Letter.zip (26.3 KB)

Code

var me = hypeDocument.getSymbolInstanceById(element.id).symbolName() 
	 
	 element.querySelector('.aLetter').innerHTML = me[0]/* We only use the first Character but 
	 you can remove the [0] and get all characters  */
2 Likes
8

The technique is clever but the only down fall is the text its not in real time one has to adjust the spacing by going to preview and back to hype, wish hype had a real time preview right within its art board much like in dreamweaver.

9

As this is for headlines… copy & paste on a few letters shouldn’t hurt. I like about these that anybody without coding knowledge can tweak them to perfection. For use of code one can use something like https://splitting.js.org/ and some js tweens.

1 Like