Text glint effect

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)

One way..

Just run another group of elements behind the image.

glint.hype.zip (102.5 KB)

Uses groups with hidden vis. etc.

2 Likes

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)

3 Likes