Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
liftdotgif

Multiple css filter tweens

Recommended Posts

In other instances (if I'm remembering correctly), I've been able to chain multiple transforms (ex: translateX and scaleX) and animate them, but it doesn't seem like I can achieve the same thing with multiple filters. 

`.to(clearSVG, 1, {css:{opacity: 1, width: '92px', filter: 'drop-shadow(0px 0px 0px rgba(255, 255, 255, 0.7)) blur(0px)'}})`

 

Attempting to troubleshoot this I've tried just animating one of the properties and...
 

If my css is:
`.clear-svg {   filter: blur(15px) drop-shadow( 10px 10px 15px rgba(255,255,255,.7) );  }`

and my tween is:

`.to(clearSVG, 1, {css:{opacity: 1, width: '92px', filter: 'drop-shadow(0px 0px 0px rgba(255, 255, 255, 0.7)) blur(0px)'}})`
OR

`.to(clearSVG, 1, {css:{opacity: 1, width: '92px', filter: 'blur(0px)'}})`

 

it won't trigger or it just snaps to the end CSS. If I have just one property or the other in CSS and have the same prop in JS, it will tween. But I can't tween *both*.

 

Do I need to set up some sort of function to slowly tween all the numerical values (similar to:

See the Pen omsrL?editors=1010 by joemidi (@joemidi) on CodePen

) or can I target both filter props with the GSAP tween?

 

Link to post
Share on other sites

Browser support for filters isn't very good, and GSAP can't really "fix" that. It doesn't claim to support filters natively. But since you can animate any property of any JS object, you can certainly cobble together your own solution for browsers that do support it, like that codepen you linked to. 

 

Also keep in mind that GSAP can isolate individual numeric values inside more complex strings, and as long as they're in the same order, it'll animate them beautifully. Example: 

var filters = {value:"blur(15px) drop-shadow( 10px 10px 15px rgba(255,255,255,.7) )" };
TweenMax.to(filters, 2, {value: "blur(0px) drop-shadow( 0px 0px 0px rgba(255,255,255,.7)", onUpdate:function() {
    element.style.filter = filters.value;
}}); 

 

Does that help? 

  • Like 2
  • Thanks 1
Link to post
Share on other sites

That worked! 

I needed `element[0].style.filter` instead but it's animating both properties now. Thank you!

  • Like 1
Link to post
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.

×