Jump to content
Search Community

SVG fill animation

namjoonforpresident 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

I've been trying to have the fill colour of this SVG change on hover, but I'm not having any luck. So far all it does increase in size when I hover over it. I'm not sure what other way I can go about accomplishing this.  Any suggestions?

 

I'm sorry about all the files, I can't seem to get the image to show on codepen...

 

am-tranparent.svg index.html main.css main.js

critical_massive_microphone_illo.svg

Link to comment
Share on other sites

Hi @namjoonforpresident. It looks like you're trying to animate the "fill" of an <object> (which won't work). I'd recommend placing the <svg> inline so that you can have access to its contents. Then you can target any individual <path> (or whatever). 

 

If you still need some help, I'd highly recommend following @PointC's suggestion and post a codepen demo. It greatly increases your chances of getting a solid answer :)

 

Happy tweening!

  • Like 2
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...