Jump to content
Search Community

Animating SVG logo fill

RyRInfo test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

@RyRInfo, have a look here to see how I tween a span behind an SVG to look fluid like.

 

See the Pen AXYRwj by sgorneau (@sgorneau) on CodePen

 

A few notes ...

 

The "fill" is actually a span with a background color that is showing through the SVG and I'm tweening that span. This is all inside of a div with a border and border radius with overflow:hidden to mask any of the span outside of the circle. You could so something similar by leaving the R&R letter fill transparent in your SGV, but actually leave the area outside of the letters white to "mask" the span. I put mask in quotes because it's not an SVG <mask>. That is also another option ... explained here.

 

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask

 

Also note that the amount of the tween is based off of a data-completion attribute on each wrapping div ... so a bit of the JS is just calculating how much to tween the span.

 

I just find making a knocked out SVG and stuffing it into a DIV with overflow hidden an easier way to do these things. Here is a simple CodePen showing that.

 

See the Pen vbQvMR by sgorneau (@sgorneau) on CodePen

 

Hope this helps!

 

EDIT: Did the SG for my initials ... it's not of mixup of GreenSock initials :)

  • Like 5
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.
×
×
  • Create New...