Jump to content


Image brightness

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



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

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



Link to comment
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 comment
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 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.