Jump to content
Search Community

@Keyframe and Opacity

Lynx 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 need to have the SVG graphic eraser, animate and erase the SVG graphic, previous. I've tried aligning classes as in @keyframe .className; as well as nesting a class within @keyframe with no success ? I've asked online and it seems it's not possible with CSS @keyframe, I prefer to do it with CSS @keyframe.  I know it's not directly a GSAP question I'm hoping someone can give some feedback.



Link to comment
Share on other sites

Hi Lynx,


I think you should elaborate a bit more on what is it you would like to achieve. I had a look at your example but nothing is happening there.


As you are aware, in this forums we focus on GSAP, if you really want to use CSS @keyframe you will have a better chance at somewhere like StackOverflow (although it seems you have already tried it).


Now, from what I understand you are after, I have to say, I don't think you will be able to achieve with SVG and CSS. Simply because of the nature of the technology. If you are looking for an 'eraser' effect, you need something like Canvas, so that things are drawn as pixels, then you can manipulate those pixels. You could, in theory, achieve a similar result in SVG with masks. But I don't think it would be the most efficient solution.

  • Like 5
Link to comment
Share on other sites

I saw the word eraser, and remembered seeing something like that over on Inkfood. 



I copied the masking demo into a pen for you. Erase the grass to reveal the dirt.

See the Pen a9eb0affd4f2c0c9f05a0e33168fe185?editors=0010 by osublake (@osublake) on CodePen


@@Dipscom He knows this is for GSAP, but he likes testing our knowledge of theoretical SVG animation and design.


  • Like 6
Link to comment
Share on other sites

This effect can't be done with CSS :( I don't need it to be elaborate, why I decided to go with CSS over anything else, including GSAP.  What I wanted was a animated effect on ::hover, and once again it appears canvas is only capable of handling the task !

Link to comment
Share on other sites


I don't think anybody knows what you're trying to do because your example on JSBin didn't do anything. Even if it didn't work exactly as you wanted, a partially working animation is better than none.



That's pretty good! I'm pretty much the same way. I have tons of stuff that I never show off because I don't feel like cleaning it up. Every so often an issue pops on this forum that is exactly like something I made several months ago, and I have to go dust it off and make it presentable.

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