Image brightness

[Onizuki 0 Likes (Newbie)]

Hello

 

how could I control (animate) the brightness of an image through GS?

something like filter: brightness(2) fadein on hover.

 

thanks

 

[Rodrigo 5,912 Likes (Superhero)]

Hi,

 

One solution is create an object with the starting value for the filter (I used 1 for the sample), tween that value and then apply it to the image:

var brightnessObj = {'brightnes':1};

function updateBgt(){
  image
    .css('-webkit-filter','brightness(' + Math.floor(brightnessObj.brightnes*1000) / 1000 + ')')
    .css('filter','brightness(' + Math.floor(brightnessObj.brightnes*1000) / 1000 + ')')
};

TweenLite.to(brightnesObj, 1, {brightnes: 2, onUpdate:updateBgt});

You can see it working here:

 

See the Pen LNzPVK by rhernando (@rhernando) on CodePen

 

Also you can use the setter/getter functions in an object to achieve the same result:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters

[Carl 11,326 Likes (Superhero)]

Great demo, Rodrigo!

 

There was a typo in your tween

 

brightnesObj instead of brightnessObj.

 

I fixed and forked here: http://codepen.io/GreenSock/pen/RaLbKa

[Jonathan 5,394 Likes (Superhero)]

Nice Guys!

 

Here is my take on animating the CSS Filter brightness() property with GSAP:

 

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