Jump to content
Search Community

Multiple css filter tweens

liftdotgif 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

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 comment
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 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...