Jump to content
GreenSock

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

Image brightness

Recommended Posts

Hello

 

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

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

 

thanks

 
Link to post
Share on other sites

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

  • Like 4
Link to post
Share on other sites

Nice Guys! ;)

 

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

 

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

 

:)

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

×