Jump to content
GreenSock

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

Animate grayscale css in TimelineMax

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

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.

 

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