filter animation in GSAP
Hello all,
I have encoutered two problems with gsap.
The first one is that I want to make a filter animation with gsap, in which I may modify several css filter properties at the same time.
-webkit-filter:saturate(1) hue-rotate(0deg) brightness(1) contrast(1)) grayscale(0.5)
How can I set these filter properties in gsap timelineLite? Expecting the similiar way like transform:
timelineLite.to(element,{x:100,scaleX:2,rotation:30})
And How can I get these filter properties in separatel
What's weird is that when you get the initial value from the browser, it reports it with the color as the FIRST parameter:
var div = document.querySelector("div");
div.style.filter = "drop-shadow(0px 0px 5px #f00)";
var cs = document.defaultView.getComputedStyle(div);
console.log(cs.filter); //reports drop-shadow(rgb(255, 0, 0) 0px 0px 5px)
So that was throwing things off, as GSAP was trying to tween drop-shadow(rgb(255, 0, 0) 0px 0px 5px) to "drop-shadow(0px 0px 5px #00f)", so the values did
