Jump to content

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

Image brightness

Recommended Posts



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

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



Link to post
Share on other sites



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(){
    .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:


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