Jump to content

BC Development

Reveal SVG from right to left and push content

Recommended Posts

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.