Jump to content
GreenSock

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

Animating multiple CSS filters?

Recommended Posts

I was having issues setting multiple CSS filters on an element. I wanted to create a colorization filter similar to what you'd see in GIMP or Photoshop. It seems like some filters don't play nicely with others. hue-rotate seems to be one culprit, among others:
 

TweenMax.set('#main-bg', {
  filter: 'invert(40%)',
  filter: 'greyscale(100%)',
  filter: 'brightness(40%)',
  filter: 'sepia(100%)',
  filter: 'saturate(400%)',
  filter: 'hue-rotate(-50deg)'
});

 

It wasn't colorizing the element red as I expected. Is this possible using GSAP or are there known issues with tweening multiple filters? Is my syntax wrong? Do I need to set it as one property as an object or something like that?

Link to comment
Share on other sites

In your example, only last filter is getting applied. You also have typo in second filter 'grayscale'. As for tweening, it looks like you will have to use entire string and change values you want to animate.

 

See the Pen JrQXga by Sahil89 (@Sahil89) on CodePen

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

That's really not valid JavaScript using the same property name like that. 

 

I think the best way to animate filters at the moment is to not do it directly. Lots of weird things can happen, particularly with drop shadows. So I would create a filters object, and then tween that. This will also allow you to tween the filters independently.

 

See the Pen aLgZJQ by osublake (@osublake) on CodePen

 

 

  • Like 6
Link to comment
Share on other sites

Perfect. This works perfectly! I was having a hard time getting the tween to actually work, but now it's working perfectly. Here's what I was using for folks that are interested:

 

TweenMax.to('#mainBG', 3, {
  startAt: {
    filter: 'invert(0%) grayscale(0%) brightness(100%) sepia(0%) saturate(100%) hue-rotate(0deg)'
  },
  filter: 'invert(100%) grayscale(100%) brightness(100%) sepia(100%) saturate(400%) hue-rotate(120deg)'
});

 

Link to comment
Share on other sites

@OSUblake Just gave it a try to see how drop shadow behaves. Any other properties behave weirdly or it all depends on combination?

 

See the Pen yzdaOG by Sahil89 (@Sahil89) on CodePen

 

@Maelfyn Follow Blake's approach, it will be far more reliable.

 

 

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

Kind of off-topic, but how much filtering can modern desktop browsers handle? Can I blur 2? 10? 20? 100 images? When would a desktop choke? This is something I will be experimenting with myself when I get the chance. I'm also curious about the performance compared to canvas.

Link to comment
Share on other sites

I just experimented with this tonight. In Chrome I was able to independently tween 1000 different 382x400 images using an infinite looping hue rotation. In Chrome it animated it flawlessly. I noticed that Firefox was choppier, but it still performed far beyond my expectations. I only expect to have 10 or 20 images on the screen, so it should perform very well on any modern desktop/browser combo.

hue-rotate-test.jpg

Link to comment
Share on other sites

12 hours ago, Maelfyn said:

how much filtering can modern desktop browsers handle? Can I blur 2? 10? 20? 100 images? When would a desktop choke? 

 

Filters are done on the GPU, so they are really fast. Filters that change an element's color will be the fastest. Drop shadow is the slowest filter, followed by blur. 

 

I don't know how many it can handle, but it's going to be more than your typical CSS property as they are hardware accelerated. If you only animate transforms, opacity, and filters, performance should be pretty good. Animating other properties will cause the element to redrawn, degrading performance. Note that transforms does not include scale unless you set its will-change CSS property.

 

And Firefox is without a doubt the slowest browser, but that's about to change.

https://www.mozilla.org/en-US/firefox/quantum/

 

 

12 hours ago, Maelfyn said:

I'm also curious about the performance compared to canvas.

 

Canvas can use the same CSS and SVG filters, so there won't be a difference if you're only animating a handful of objects.  Performance gains with canvas are made by using less memory, not having to create and manage an element for everything that is visible, and being able to reuse graphics like a rubber stamp.

 

And with canvas you can do some really cool things, like painting a filter.

 

See the Pen aLrXzw by osublake (@osublake) on CodePen

 

 

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

18 hours ago, Sahil said:

Any other properties behave weirdly or it all depends on combination?

 

Not that I've noticed. But keep in mind that filters includes SVG filters, so there's an infinite number of combinations.

 

Just for fun, here's a simple SVG motion blur filter. 

 

See the Pen WZqBjV by osublake (@osublake) on CodePen

 

 

  • Like 4
  • 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.
×