Background Box Scale Animation

[Matheus Dias]

Well, I wan't to make an animation that changes the text color/background with a "box scale reveal". I made a simple video on Figma to show what i'm trying to produce:

https://streamable.com/zibc8n

 

I made a simple pen to that, but it only fades the background for now. I'm not sure how do to it or even if it's possible. Any help is appreciated

See the Pen VweRYWa by Maath (@Maath) on CodePen

[ZachSaucier]

Hey Mattheus. There are a lot of ways to achieve that effect:

• You could use HTML and CSS - Have two versions overlayed, the top one with overflow: hidden and then animate its width.
• You could use SVG clip paths - Again have two versions (though in SVG), apply a clip path to the top one, then animate the clip path to reveal it.

There are others as well as variations of the above but I won't bore you as those are probably your two best approaches depending on what you're more comfortable with and what your needs are.

 

Let us know if you have specific questions, especially related to GSAP