liftdotgif
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by liftdotgif
-
-
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?
Multiple css filter tweens
in GSAP
Posted
That worked!
I needed `element[0].style.filter` instead but it's animating both properties now. Thank you!