Animate grayscale css in TimelineMax

[prabhath 0 Likes (Newbie)]

Hi

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.

 

[Carl 9,066 Likes (Superhero)]

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!

[prabhath 0 Likes (Newbie)]

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

[Rodrigo 2,662 Likes (Superhero)]

Hi,

 

In this post you'll find some answers to animate css image filters:

 

http://greensock.com/forums/topic/14072-image-brightness/

 

Hopefully is enough to get you started.

[Jonathan 5,176 Likes (Superhero)]

Hello prabhath,

 

Here is an example of animating the CSS filter grayscale with GSAP

 

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

 

And animating via manual sliding of a UI slider bar

 

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

 

[GreenSock 8,117 Likes (Superhero)]

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

[Jonathan 5,176 Likes (Superhero)]

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!