Jump to content


Animate grayscale css in TimelineMax

Moderator Tag

Recommended Posts


I create TlimeLineMax image gallery animation. refer below code.


"tl.add(TweenLite.to(img1, 1, {delay:1, css: { 'filter': 'grayscale(0%)','-webkit-filter': 'grayscale(0%)' },ease:Linear.easeNone}));"


animation was work perfectly. but grayscale is too fast.


how can i slow this grayscale aniamtion.


Thank you.


Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


To make an animation slower you would increase the duration. Right now your animation is 1 second long. To make it 5 seconds long do this


tl.add(TweenLite.to(img1, 5, {delay:1, css: { 'filter': 'grayscale(0%)','-webkit-filter': 'grayscale(0%)' },ease:Linear.easeNone}));


However if you got the animation to work, I'm a little surprised that is something you would have had trouble with. If you mean something else, please create a CodePen demo so we can better assist. Thanks!

  • Like 1
Link to comment
Share on other sites

Hi Carl,


Thank you very much your answer.


I add code in to

See the Pen zqRNGm by prabhath (@prabhath) on CodePen

please refer to get some idea.

The filter animation not happening. please help


Thank you

Link to comment
Share on other sites

By the way, we made some improvements and released 1.18.3 which handles this better right out-of-the-box. 

  • Like 1
Link to comment
Share on other sites

Thanks Jack! ;)


Below is a fork of

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

that used the onUpdate set() way to animate CSS Filters.


Now it just animates the CSS Filter directly within the vars:

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


Keep in mind you still have to add both the -webkit prefix and the standard filter property. Otherwise it wont work in webkit based browsers like Chrome and Safari, that require the -webkit prefix.

TweenMax.to('#grayscale img', 2, {
    '-webkit-filter':'grayscale(0%)', /* needed to work in webkit based browsers that don't support standards */
    filter: 'grayscale(0%)'

Happy Tweening!



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