Jump to content
Search Community

Problem on animate clip-path

benbostrom155 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

Hi, i have this problem:


if i use this tweenmax is ok and the animation work perfectly


TweenMax.fromTo($(this), 1, {webkitClipPath:'inset(0% 100% 0% 0%)'}, {delay:2, webkitClipPath:'inset(0% 0% 0% 0%)', ease: Expo.easeInOut});


but if i use this code


TweenMax.fromTo($(this), 1, {webkitClipPath:'inset(100% 0% 0% 0%)'}, {delay:2, webkitClipPath:'inset(0% 0% 0% 0%)', ease: Expo.easeInOut});


the animation not work and is istant change of clip.



Link to comment
Share on other sites

Yes - as Sir Jonathan mentioned, a CodePen would help greatly.


Just an FYI. You're using fromTo() tweens which will immediately render unless you set the boolean to false. From the docs:

  • immediateRender : Boolean - Normally when you create a tween, it begins rendering on the very next frame (update cycle) unless you specify a delay. However, if you prefer to force the tween to render immediately when it is created, setimmediateRender to true. Or to prevent a from() from rendering immediately, set immediateRender to false. By default, from() tweens set immediateRender to true.

Happy tweening.


  • Like 1
Link to comment
Share on other sites

Thanks, guys. We suspect there is something more nefarious at play in the browser.


Removing GSAP from the equation entirely you can see that the browser sometimes calculates and returns values in a different format.

See here how the inset is set with 4 values via javascript but the browser reports back only 3



demo: http://codepen.io/GreenSock/pen/60750d3c999519606f13da72aa306680/?editors=0010


GSAP's CSSPlugin doesn't have any special logic for clip-path, it just matches up numbers it finds in the start string and animates them to numbers it finds in the end string. This requires that both strings have the same number of numbers.


This is discussed in greater detail in this post about animating filters: https://greensock.com/forums/topic/14227-filter-animation-in-gsap/?p=60347


benbostrom, we will report back if we find a reasonable way to fix this in CSSPlugin. 


In the meantime, you can use the solution that GreenSock reported in that same post regarding animating a property of a generic object and applying that value via an onUpdate like


var webkitClipPath = {value:"inset(100% 0% 0% 0%)"},
     element = document.querySelectorAll('div')[0];

TweenLite.to(webkitClipPath, 1, {
    value: "inset(0% 0% 0% 0%)",
    onUpdate: function () {
      element.style.webkitClipPath = webkitClipPath.value;



  • Like 4
Link to comment
Share on other sites

  • 2 weeks later...
  • 1 year later...

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