Text glint effect

Animation
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