Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Robert Wildling

SVG dropshadow filter animation with set()

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

After Reading through some topics in the forum and on codepen, I try to do a "filter:drop-shadow(...)" animation on a CSS filter that is supposed to take effect on the SVG, using the onupdate() and TweenMax.set() methods. Unfortunately unsuccessfully so far.

 

The included codepen shows the basic animation:

1. first an animation over opacity and scale, then

2. the "onUpdate -> set" animation, which is, where the magic should happen.

 

There are 2 debug helper functions that throw out some values to the console. And they seem to proof that the values for the shadow distance and the color opacity ( in var logoFilterAmount) are calculated correctly over the course of the animation, but the final result (using getComputedStyle to check) shows strange numbers that I can't explain to myself how they were created.

 

Any insight here would be most welcome!

Thank you!

 

See the Pen mOoygz by rowild (@rowild) on CodePen

Link to comment
Share on other sites

Hi there, calling functions is a bit wonky as I experience it myself.

I fixed it by calling the functions within a function as shown below

onComplete: function() {readSVG();},
onUpdate: function() {setLogoShadow();}

Hope this fixed it for you :)

 

p.s. keep in mind that calling a function with onUpdate keeps recalling the function, as to such depending on what you try to do it might try to do it 300 times. In this case it is no problem though.

  • Like 2
Link to comment
Share on other sites

Hey Robert Wildling,

 

There is one issue with your setup. You're animating a property but the property is not defined in the SVG so, in the first run of the animation, things look a bit wonky, after that, all seem to work as expected.

 

Try adding a default filter value to the CSS or the SVG so that GSAP can calculate the initial parameters correctly. After you add that, you should be able to tween it without the need of an onUpdate method call.

 

Also, I assume you are aware this filter effect on SVGs is only currently supported in Firefox.

 

https://developer.mozilla.org/en/docs/Web/CSS/filter

  • Like 2
Link to comment
Share on other sites

Thank you, Dipscom, for your response! I will work through it. For now I was just wondering, what you mean by "only Firefox"... caniuse shows me this:

http://caniuse.com/#search=filter

 

And actually, the drop-shadow on the SG does work, it just is not animated (yet)...

 

I am also confused about setting anything on the SVG. I thought using CSS Filters doesn't require any settings on the SVG anymore... 

Link to comment
Share on other sites

CSS filter effects have a good support when we're talking DOM elements. The topmost SVG is a DOM element but, the elements inside an SVG are not. And those elements, don't have good browser support yet.

 

I looked at your example pen in Chrome, Safari and Firefox, but was only able to see the drop shadow in Firefox. If you look at the bottom of the article from MDN I linked, it shows a table of current support. You will see the distinction between DOM elements and SVG elements.

 

 

Unfortunately, caniuse.com is not the "be all end all" reference for all elements/properties. It is a great starting point but, like everything in the world, it has limitations.

 

I am also confused about setting anything on the SVG. I thought using CSS Filters doesn't require any settings on the SVG anymore... 

 

You are correct. It doesn't require setting anything on the SVG. It does, however, need to be setting somewhere to allow GSAP to read its properties and make the correct calculations. Like, in the external CSS or even in the inline CSS.

 

For example:

.c-logo-svg {
  display: block;
  position: absolute;
  top: 10vh;
  max-height: 80vh;
  width: 392px;
  left: calc((50% - 169px));


  opacity: 0.5;
  transform: scale(0.5);

 filter: drop-shadow(0px 0px 0px white);
}
  • 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.
×