Jump to content
Search Community

Image Clipping

ppdc test
Moderator Tag

Go to solution Solved by GreenSock,

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



I did play around with your new Plugin, and tried to morph a svg shape used as clippingPath on an image.

I know, support for this varies among browsers, IE being the usual spoilsport, but still... I was playing around with that recently while trying to port a flash-banner to html. The ability to animate masks is one of the few things I still miss from the Flash-days.


However, it kind-of works out of the box, but there seems to be a redraw issue.

Here's my pen:

See the Pen epgbXg by ppdc (@ppdc) on CodePen


Firefox works fine, Chrome and Safari only update the mask on the image if you force a redraw, by scrolling or resizing the frame in codepen.


Having said that, exceptional work, as always Mr GreenSock!



Link to comment
Share on other sites

  • Solution

Yeah, browsers seem to have a lot of strange redraw issues when it comes to things like masking.


I noticed that I could get Chrome and Safari to render beautifully if I also animated the backgroundColor of the element (in this case the <img>) at the same time!


I think what's happening is that it's pushing the image to the compositor/GPU but then the animation on the mask isn't triggering it to re-push the revised pixels over to the compositor/GPU. But if you animate the color, it forces that trigger. Totally a guess on my part. 

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