Text glint effect

Animation
1

Hey everyone!

Does anyone know how to make a nice looking text glint effect? My main problem?
The fonts the client wants to use for their banners are not available in Tumult Hype and they are not google fonts so I have to make the text as a transparent picture in photoshop :thinking:

This is the effect I'm after: https://www.youtube.com/watch?v=_U23xAUY6N4

(Animation shows at 00:16 seconds)

2

One way..

Just run another group of elements behind the image.

glint.hype.zip (102.5 KB)

Uses groups with hidden vis. etc.

3 Likes
3

This is probably a better way of doing it.

We will use Masking. The Mask will use you text image as the mask on the scene.

	<style>
	

.mask1 {
  -webkit-mask-image: url("${resourcesFolderName}/glint.png");
 	 mask-image: url("${resourcesFolderName}/glint.png");
  -webkit-mask-repeat: no-repeat;
  	mask-repeat: no-repeat; 
  -webkit-mask-size: 100%;
  	mask-size: 100%;   
}

</style>

We have every thing we need in a group and apply the mask to that. This means anything outside the group will not be masked.

Then any background will be the fill. this allows you to change the text colour by using what ever you want, a rect or image.

The glint works in the same way

Glint_2_using Mask.hype.zip (144.6 KB)

5 Likes
4

Sorry for the late respond. Thank you so much! Perfect!

5

Just a question. I need to use option 2 since the background is not a solid color. However with this solution I can't see the glare in Hype only in preview. Is there any way to solve this so I can control when the glint should appear? It will be used for more than one text.

6

If I understand you correctly,

The glint /glare is controlled by a Timeline in this example.
It is just an animation of a group's ( with rectangle inside) origin and motion.
The animation's easing is linear by the way.

Select the Timeline 'glint' and then you will be able to run the play head back and forth to see where it starts and finishes . You will be able to edit the animations on the timeline like any other..

1 Like