Jump to content
Search Community

Tween CSS filter attribute

musemega 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

This code successfully brightens, then dims image brightness (via the css filter attribute):

TweenLite.to($(this).children('img'), 0.1, { css: { '-webkit-filter': 'brightness(1.75)' });
TweenLite.to($(this).children('img'), 1.5, { css: { '-webkit-filter': 'brightness(1.21)' }, delay: 0.15 });

However, I'd like to tween the brightness level to get a smooth transition (rather than the current stepped/chunk method that this code produces).

 

Is there a GreenSock solution/approach to tweening at this level?

 

 

Link to comment
Share on other sites

Hello musemega..

 

Have you tried using percentages instead?

 

The Filter Brightness value can be: 0-1 or 0-100%

 

Examples of using percentages:

 

This uses a ui range slider (only Chrome):

See the Pen gxGLh by jonathan (@jonathan) on CodePen

 

This animates using onUpdate (only Chrome):

See the Pen rnBmf by jonathan (@jonathan) on CodePen


 

But it only works in Chrome due to Firefox / IE not supporting CSS filters yet without SVG, and the HTML5 input ui range slider.

// set initial brightness value, in this case 0%
TweenMax.set('#brightness img',{'-webkit-filter':'brightness(0%)'});

// animate the brightness value from 0 to 100%
TweenMax.to({}, 2, {
     onUpdate: function(tl){
          // convert timeline progress to a percentage
          var tlp = (tl.progress()*100) >> 0;
          // set brightness value on each update          
          TweenMax.set('#brightness img',{
               '-webkit-filter': 'brightness(' + tlp + '%)'
          });
     },
     onUpdateParams: ["{self}"] // references the tweens timeline
});

Also, it could be done with TimelineLite or TimelineMax:

// animates CSS filter brightness on timeline update
function animateBrightness(tl) {
     // convert timeline progress to a percentage
     var tlp = (tl.progress()*100) >> 0;
     // set brightness value on each update
     TweenMax.set('#brightness img',{
        '-webkit-filter': 'brightness(' + tlp + '%)'
     });
}

// create TimelineMax instance
var tl = new TimelineMax({
           paused: true,
           onUpdateParams: ["{self}"],
           onUpdate: animateBrightness
});

// set initial brightness value, in this case 0%
tl.set('#brightness img',{'-webkit-filter':'brightness(0%)'});

// add other tweens here or not
// tl.fromTo({});

// play timeline
tl.play(0);

Is it possible that you can setup a limited codepen demo example so we can see the behavior you describe..

 

Link to a video tut by GreenSock on how to create a codepen demo example:

 

http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

UPDATE:

Firefox 35 and up now suports CSS Filters:

https://developer.mo...fox/Releases/35

 

:)

  • Like 3
Link to comment
Share on other sites

  • 10 months later...

Hello,

 

I was wondering if you had any plans to add native support for tweening filter properties, instead of needing to hack this as above. it would also be great if you would tween the various filters individually, similar to how the transform() property works where you can also individually tween eg scale: 0.5, rotate: 30 etc

 

for example:

 

{

brightness: '50%',

blur: 10,

sepia: 2

}

 

this would be a great addition to the css plugin!

 

Thanks,

Anna

Link to comment
Share on other sites

When Firefox 35 was released a couple of weeks ago.. Mozilla's changelog showed that Firefox now supports CSS Filters!

So WebKit based browsers like Chrome and Safari are not the only browsers to support CSS Filters. My above example could be changed to remove the -wekit vendor prefix.

https://developer.mozilla.org/en-US/Firefox/Releases/35

https://developer.mozilla.org/en-US/docs/Web/CSS/filter

:)

Link to comment
Share on other sites

Hello Again,

 

You could just check if the browser is webkit based and then use the vendor prefix if it is:

 

See the Pen dPZvvo by jonathan (@jonathan) on CodePen

:

var cssFilter;
    isWebkit = navigator.userAgent.indexOf('AppleWebKit') != -1

if(isWebkit){
    cssFilter = {'-webkit-filter':'brightness(0%)'};
} else {
    cssFilter = {filter:'brightness(0%)'};
}

// set initial brightness value, in this case 0%
TweenMax.set('#brightness img',cssFilter);

// animate the brightness value from 0 to 100%
TweenMax.to({}, 2, {
     onUpdate: function(tl){
          // convert timeline progress to a percentage
          var tlp = (tl.progress()*100) >> 0;
          // set brightness value on each update 
          if(isWebkit){
              cssFilter = {'-webkit-filter':'brightness(' + tlp + '%)'};
          } else {
              cssFilter = {filter:'brightness(' + tlp + '%)'};
          }
          TweenMax.set('#brightness img',cssFilter);
     },
     onUpdateParams: ["{self}"] // references the tweens timeline
});

:

But this is just my hodge-podge temporary solution.  I'm sure that the two GreenSock Grandmasters Jack and Carl, can come up with a better solution.. maybe one that is part of the CSSPlugin for CSS Filters.

 

Hope this helps! :)

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

Thanks for that Jonathan.

I did this for Blur based on yours. 

Just call it from onUpdate with "self", start blur value, end blur value.

function blurt(tl, start, end ){
	var tlp = (tl.progress()*100) >> 0;
	if (start < end){
			var inc = start + Math.abs(start - end)/100 * tlp; 
		}else {
			var inc = start - Math.abs(start - end)/100 * tlp; 
		}
	TweenMax.set(tl.target,{'-webkit-filter':'blur('+(inc)+'px)', 'filter':'blur('+(inc)+'px)'});
	}
});
  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

I just made a little function for apllying css filters and put a demo on Codepen.

See the Pen ZGzOjj by tizenketto (@tizenketto) on CodePen

 

All the filters except dropshadow use one function. Dropshadow is a special case since it accepts four parameters (offset-x offset-y blur-radius color).

I left out spread but will update that soon. I wanted to make it appear like a light is moving in front of the image and casting a variable shadow.

 

Any help improving this is always appreciated.

  • Like 2
Link to comment
Share on other sites

  • 4 months later...

Hello,

I made some code based on tizenketto pen. It's cross-browser and filters can be overlapped. This is the main code trigger:

var tl = new TimelineLite();
    tl.fromTo( progressEase, .5, { progress:0 }, { progress:1, ease:Strong.easeOut, onUpdate:cssFilterTween, onUpdateParams:[ "{self}", { target:image, filter:"blur", start:0, end:4 } ] } );

Check the full code here: 

See the Pen gaPqeK by jeanpaze (@jeanpaze) on CodePen

 

I hope this help someone and will be nice to see this as a GSAP plugin. Feel free to improve!  :)

Link to comment
Share on other sites

Hello Jonathan,

 

I don't have android mobile, but when i emulate (i know, its not the same thing) your config in my chrome desktop, it works. Maybe the "window.onload" can be the problem.
 
Note: When animation is done, the image is hidden. 
 
As i said, any improving is appreciated.  ;)
Link to comment
Share on other sites

Yep JeanPz .. now i see something :)

 

Good job.. but CSS filters wont work in IE9, IE10, IE11, or Edge. But that is expected since IE does not support CSS Filters at this time.

 

I would recommend you look into SVG filters.. since those filters are supported in IE10 and above.. as well as Safari, Chrome, and Firefox

 

SVG Filters using GSAP (cross browser):

 

Hope this helps! :)

  • Like 1
Link to comment
Share on other sites

  • 4 months later...

Hi,

 

I'm migrating our content editor system's animation engine from CSS3 to GSAP because I found multiple easings on the same element on the same property are hardly possible in CSS3, and also hope to see performance improvement. I was glad to see GSAP handles multiple transform values on the same element easily, but I would need basicly just what annam asked previously, is there any update on this?

 

I played around with JeanPz's pen he shared, tried to overlap two tweens by setting the fourth parameter of the to() function between 0 and 1 but I couldn't make it to do both effects at the same time or overlapped, because it seemed one overwrites the other's effect because they both set the filter's value.

 

With CSS I had to calculate filter values if they overlapped in some way, for example:

An animation on an element that lasts 4 seconds total, from 0 to 3 seconds it animates blur from 0px to 15px, and from 1 second to 4 seconds it animates invert from 0 to 75. This required calculations that made 4 keyframes total, first one at 0% both values set to 0, second one at 25%, blur set to 5px, invert set to 0, third one at 75%, blur set to 15px, invert set to 50, fourth one at 100% blur set to 15px, and invert set to 75. Do I have to do such things using GSAP too or is there any efficient way to do this? Also this way if the ease is set to anything different than the default then calculating the middle values would be depressing.

 

Our system is a digital signage solution, using Android and Chrome devices, and those support filters near completely, so browser compatibility issues of filter are negligible for us.

 

Thanks in advance for your help!

 

Roland

Link to comment
Share on other sites

Thanks for the reply OSUblake, but my main problem was to animate those properties independently. I managed to solve it, I modified JeanPz's pen, I hope it can help somebody:

See the Pen xZWPLL by anon (@anon) on CodePen



Main features are animating multiple filter effects of the same element, fully independently, with different eases. Properties can be changed by different timelines, it can animate rgb and rgba colors, and any other numeric value. Tested only under Chrome 47, Windows 8, but should work under most browsers that support CSS Filter, it sets the normal filter property and the -webkit-filter property.
 

Link to comment
Share on other sites

srmark, if i were you i would opt for SVG filters instead of CSS filters, since most of all SVG filters are supported in all modern browsers. Versus CSS filters which have either no, partial or buggy support. Firefox just allowed CSS filters a couple releases ago, but still the support is partial and buggy, even in Chrome, especially with IE having no support of CSS filters.

 

Just my two cents! :)

  • Like 1
Link to comment
Share on other sites

Jonathan, I wrote about that in my previous comment: 

Our system is a digital signage solution, using Android and Chrome devices, and those support filters near completely, so browser compatibility issues of filter are negligible for us.

 

I didn't look into SVG filters much yet, but so far the coding seems more complicated, and our content is produced by an UI where average non-programmer people can make their contents by clicking. I may see about it to make it our future feature in our editor.

Link to comment
Share on other sites

Either way if you use CSS Filters or SVG filters. The coding in GSAP is the same and is actually less code to write. In GSAP you would be animating the attribute using the GSAP AttrPlugin, instead of the CSSPlugin, that just happens automatically internally within GSAP for you. Which means you wrap the property, in this case the attribute name, in the attr:{} object, to let GSAP know its an attribute your animating. But its pretty much the same animating it with GSAP. And you can do the same for CSS properties wrapping them in a CSS:{} object if you want, but GSAP is smart enough to know the difference between a DOM element and a CSS property. Just my two cents.. happy tweening :)

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