Jump to content
GreenSock

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

Tween CSS filter attribute

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 post
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 post
Share on other sites

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 post
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 post
Share on other sites

@Jonathan just tested this, firefox does support this now! thats great news! however Chrome still needs the -webkit prefix so you need to adjust both.

 

any thoughts on my request? :)

Link to post
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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

nice. I'm sure that will come in handy for some folks. good job! thanks for sharing.

Link to post
Share on other sites

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 post
Share on other sites

Hello JeanPz,

 

I just tried to view your codepen example on my mobile phone, and I didn't see anything happen in your box.

 

Im on latest Mobile Chrome, on Android 5.1.. Droid Turbo

Link to post
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 post
Share on other sites

Hello again JeanPz,

 

I tried your code example on desktop PC windows 7 (64-bit) .. but was unable to see anything animate still.

 

You have a lot of code in the JS panel of your codepen, which will take some time to decipher. I will try and look again when i have more time!

 

But Happy Tweening :)

Link to post
Share on other sites

Hello Jonathan,

 

I made some adjustments, changing the url of image and the order of window.onload call. Now you see something?

Link to post
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 post
Share on other sites

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 post
Share on other sites

I think that example was only doing 1 filter at a time. Try combining all the filters you are going to use. So to set the invert and blur you would do...

TweenLite.set(image, {
  '-webkit-filter': "invert(90%) blur(10px)"
});
  • Like 2
Link to post
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 post
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 post
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 post
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 post
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.

×