Jump to content
GreenSock

benbostrom155

Problem on animate clip-path

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.

 

Why?

Link to comment
Share on other sites

Hello benbostrom155, and Welcome to the GreenSock Forum!

 

To better assist you can you please create your code in a limited codepen demo example?

 

This way we can see your code in context and in a live editable environment within codepen.

 

 

Thank You! :)

  • Like 1
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

 

0a9b7f79939a4623937cd61d59a4be61.png

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;
    }
  });

 

http://codepen.io/GreenSock/pen/bgoLOb/?editors=0010

  • Like 4
Link to comment
Share on other sites

  • 2 weeks later...

Thanks, the last solution is not ideal and faster but work perfectly

Link to comment
Share on other sites

  • 1 year later...

Hi.. curious if there have been any updates/improvements on this behavior?

 

I understand SVG is a better way to go, but for quick testing of ideas I'd like to try to keep things simple with just a CSS prop rather than creating/exporting SVG's etc.

 

Thanks,

~s

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