CODEWITHSUNDEEP
javascriptjquerycssanimationhue
Ryan Stone
Ryan Stone

Reputation: 383

javascript/jquery .animate() hue-rotation

can you use .animate() to animate hue-rotation? if not is there a list of which properties can be animated in this function. This link : https://api.jquery.com/animate implys that .animate() is a jQuery function only, but it is working on my project without using jQuery. has this been absorbed into javascript & also, how do you manipulate css hue-rotate through javascript. i cannot find many references to this either on google or stack exchange.

I have tried many combinations of hueRotate, making it an object, json and creating string literals via `` but none of them seem to work.

    Info.style.filter = ('hueRotate:240deg;');
    Info.style.filter = `hue-rotate(240deg);`
    Info.style.filter = {(hue-rotate(240deg)};
    Info.style.filter.hueRotate = "240deg";

I have literally tried dozens of combinations both inside & outside of .animate & requestAnimationFrame but none of them are working. its probably really simple.

Upvotes: 0

Views: 1679

Answers (1)

Kaiido
Kaiido

Reputation: 137171

Yes web animations can animate filters too, like any animatable CSS properties. You simply need to specify the initial value and the final one.

document.getElementById("box").animate(
  {
    filter: ['hue-rotate(0deg)', 'hue-rotate(360deg)']
  },
  {
    duration: 2500,
    iterations: Infinity
  }
);
#box {
  background: linear-gradient( to right, purple, orange); 
  width: 200px;
  height: 200px;
}
<div id="box"></div>

Well it could actually be written in many different syntaxes...

Upvotes: 1

Related Questions