Jump to content
Search Community

Animating with GSAP Causes Clipping of CSS Filters

thejamespower test
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

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

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.
  • Create New...