Jump to content
GreenSock

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

Animating with GSAP Causes Clipping of CSS Filters

Recommended Posts

Hiya,

 

Working on something snazzy with GSAP and CSS Filters, specifically blur. I've noticed that when animating with GSAP, clipping occurs on any object with a CSS filter. Is this expected behaviour? 

 

See the Pen akybXr by thejamespower (@thejamespower) on CodePen

Link to comment
Share on other sites

I edited the codepen to also include the equivalent pure CSS animation and the same clipping occurs. I've also discovered this only occurs in Chrome. Any ideas on how to overcome this?

  • Like 1
Link to comment
Share on other sites

Hello thejamespower

 

This is not a GSAP bug.. I only see this happen in webkit based browsers like Chrome, Firefox is renders fine.

 

But the browser is rendering your element that way since you have a CSS filter and a 3D transform together.

 

You can see here in this CSS only version that clipping is happening, view in Chrome:

 

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

 

So this is a browser rendering bug in webkit, and not GSAP :)

  • Like 3
Link to comment
Share on other sites

Whenever you see something strange happening with a transform, try playing with the force3D value.

See the Pen AXojkv by osublake (@osublake) on CodePen

  • Like 2
Link to comment
Share on other sites

Nice i was going set force3D false.. but i saw it was a Chrome webkit bug still affecting CSS animations with filter and 3D transforms.

 

Chrome is ignoring transform-style: flat; to force CSS 2D transforms and disable CSS 3D transforms.

 

So this is still a webkit bug, but its good to know GSAP can work around it using JS, even though CSS Animations are left to wallow in its self pity.

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