Jump to content


clip property is deprecated

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've been using clip property to create rectangular masks.

TweenMax.to(element, 0.5, {
    // rect(top, right, bottom, left)

I've read that the css clip property is deprecated.


Will GSAP be able to poly-fill the clip property to make it compatible with browsers that have dropped support for clip?

Link to comment
Share on other sites

  • Solution

This seems to be a bit in flux, but keep in mind:

  1. It's somewhat doubtful that browsers will actually drop support - that risks breaking web sites. [disclaimer: this is merely my opinion and I have no idea what the browsers will actually do]
  2. clip:rect() performs MUCH better than clip-path.
  3. We'll do our best to adapt as the market changes. It doesn't seem like clip is on its way out anytime soon, so we'll watch and see what happens. If you run into a situation that requires something else or that breaks with clip, please let us know. As I'm sure you've seen, compatibility is important to us.
  • Like 2
Link to comment
Share on other sites

Good Morning,


Looks like they haven't fully gotten rid of clip yet, since the removal of it is only in Candidate Recommendation status. And has not reached W3C Recommendation status. So it is not set in stone just yet!  ;)


The W3C Track process:

  • Working Draft (WD)
    A Working Draft is a document that W3C has published for review by the community, including W3C Members, the public, and other technical organizations.
  • Candidate Recommendation (CR)
    A Candidate Recommendation is a document that W3C believes has been widely reviewed and satisfies the Working Group's technical requirements. W3C publishes a Candidate Recommendation to gather implementation experience.
  • Proposed Recommendation (PR)
    A Proposed Recommendation is a mature technical report that, after wide review for technical soundness and implementability, W3C has sent to the W3C Advisory Committee for final endorsement.
  • W3C Recommendation (REC)
    A W3C Recommendation is a specification or set of guidelines that, after extensive consensus-building, has received the endorsement of W3C Members and the Director. W3C recommends the wide deployment of its Recommendations. Note: W3C Recommendations are similar to the standards published by other organizations.



But either way, GSAP will still be able to bridge the gap if clip  does reach W3C Recommendation status and becomes depreciated.



  • Like 3
Link to comment
Share on other sites

  • 5 months later...

Hi, I was wondering if there were any updates on this.  MDN now says "Warning: This property is deprecated. Use clip-path instead.

This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time." 


But it seems like clip-path is still experimental? https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path


To animate a rectangular clipping path/mask using GSAP, what's the safest option across browsers?

Link to comment
Share on other sites

Okay, that warning just made me nervous.

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.