ANIMATED MASK IN FIGMA. Create an animated banner in Figma, using a gif as a mask.
With Figma we can animate texts, buttons and other resources, for example with smart animate, but it also allows us to incorporate external elements such as animated gifs. If we import gifs with a transparent background, figma recognizes these backgrounds, therefore, it offers us a very useful resource to create more complex animations that are difficult to generate only with Figma. In this tutorial we import an animated gif with a transparent background and an endlessly looping animation consisting of a twitchy opaque shape. Since figma recognizes the transparency of the gif, we can use the shape as a mask (an area that works like a window that lets us see the content that depends on it inside). This mask is not fixed but is a dynamic mask that transforms like the base animation of the gif. This resource allows us to show images and content in a more dynamic way or, as in this case, create a double image effect where the mask reveals the image at maximum opacity on a more subtle background.
If you want to see more tutorials like this don't forget to subscribe to the channel.
#figma #mascaraenfigma #figmamask #banner #animatedbanner