Reveal SVG from right to left and push content

[Maniak Development]

Hi, I'm having a difficult time with this animation. I have a logo which is going to animate from the bottom then the letters of the logo are going to be reveal from right to left at the same time that it push the logo so everything stays centered. 

I have and example but it looks like the animation is starting from the center, and not from right to left.

I tried to use a background image instead of the SVG and seems to work fine, the issue is that later on I need to change the logo color, so using background image is not an option.

Any help would be appreciated.

 

Here is an example of the animation I'm trying to do

See the Pen oNqgMVR by godhandkiller (@godhandkiller) on CodePen

[GreenSock]

Is there a GSAP-specific question we could help with, @BC Development? 

 

It looks like you could use an SVG mask or a colored block that you put over the top of the letters (same color as background) and just animate that out of the way to reveal the letters, but you move it faster right-to-left than the letters move to get that effect. 

 

Part of the problem here visually for you may simply be that you're animating the width of the #reveal-logo which is likely scaling the SVG up proportionally (that's just how browsers do it, that's unrelated to GSAP) since you didn't set a width or height attribute on the SVG element.