Animate Outlined Text background to fully filled

[Bharateshwar]

I'm trying to make an outlined text clip the div behind it to reveal the color it contains. 
I've attached the layout I'm trying to make.

- The main-bg is an absolutely position bg, which is visible through the outlined text.

- The BG is supposed to come in from left to right, to give the effect of the outlined text being filled with color.

- The issue I'm trying to fix is that the bg is not actually clipped in the shape of the text, it's a whole box.

 

This is the closest example I've found (VISUALLY ATLEAST), not really what I want as it actually has an opaque white background that's moving. I need my moving color to be clipped just by the text, so that before the color starts moving, the outlined text shows the main-bg behind. All parts of the main-bg should be visible. Unlike the example below.
-> 

 

 

 

I'd appreciate if someone can help me find a solution without SVG clipping as I need to animate the text content too. (a stagger translate). 

See the Pen LYaYQwY by bharateshwar (@bharateshwar) on CodePen

[Rodrigo]

Hi,

 

I have zero experience with this without using SVG, I googled around a bit and came across the background-clip property:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip

 

Here is a super simple demo:

See the Pen YzgzLXe by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Bharateshwar]

hi @Rodrigo, 
thanks for the above, but it doesn't have a see-through outlined text if I'm not wrong. I too have found multiple such examples.

There are just 2 reasons why I've been avoiding svgs,
1. I'm worried about the animation I want to do on text and the font size control to make it responsive.
2. I'm just not used to working with svgs. 

I'm attaching the codepen of the text animation I want, could you please help with me with a svg example of doing this if normal html/css approach is not possible? 



I'd really appreciate it. 🙌🏻
NOTE: after the outlines text is filled with color, the main-bg, or the dashed border in the example, doesn't need to show, the text can be with a solid fill.

See the Pen wvOvjzO by bharateshwar (@bharateshwar) on CodePen

 

[Rodrigo]

Hi,

 

I'm not very well versed in SVG but it can be very useful for responsive stuff, I've seen really cool stuff being animated with it.

 

@mvaneijgen one of our superstars around here, recently created this thread with a lot of very valuable information on the subject:

 

Have a look at it and you'll find some great inspiration for your project.

 

Happy Tweening!

[PointC]

I'm not sure I quite understand the desired outcome  but here are a couple pens that may give you some ideas.  (For the record I'd probably use SVG, but that's just me.)

 

See the Pen ZErvbPR by PointC (@PointC) on CodePen

 

See the Pen VwrGqrV by PointC (@PointC) on CodePen

 

Happy tweening.

[Bharateshwar]

I was able to get to what I wanted. A really simple solution really 😅 
Just applied color to another text instance positioned on top of the outlined text and just changed its width from 0. Gives an illusion of color being revealed. 
No complicated svgs or backgrounds required. 

Thanks for your inputs @Rodrigo @PointC. Please feel free to give any more inputs on my solution. 🙌🏻
 

See the Pen GReRXzL by bharateshwar (@bharateshwar) on CodePen