Jump to content
GreenSock

gioroc

SVG and Clip

Go to solution Solved by Jonathan,

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 guys!

i'm readying the resource https://greensock.com/css3/ and i'm trying to use the clip property.

I create this codepen with icon animation and all work fine with clip (i use clip for the 4 lines of the graph) with firefox, but all the other browser give me problem with the clip animation (the line should grow from the bottom).

 

What happen? I have also read some other resouce, and i

See the Pen ZppXYG by gioroc (@gioroc) on CodePen

with animation on the attr. Animation height and y i get the correct functionality, but is more "complicated" then using a clip.

 

Can i do the same thing with clip? How should i do?

Thanks!

See the Pen wzGWad by gioroc (@gioroc) on CodePen

Link to comment
Share on other sites

Hello buddy!

 

Welcome back to GreenSock Forum for your another post!

Please stand by while I'm being trying to find the solution thanks!

Link to comment
Share on other sites

Hi Jonathan,

thanks for the help. I have yet seen that is deprecated and that we should use clip-path, but i was thinking that, as he do for vendor prefix, greensock manage also this :)

So, i just need to change the clip animation with clip-path inset. I will try if Greensock manage it and let you know ;)

 

Giovanni

Link to comment
Share on other sites

Hi Jonathan,

thanks for the help. I have yet seen that is deprecated and that we should use clip-path, but i was thinking that, as he do for vendor prefix, greensock manage also this :)

So, i just need to change the clip animation with clip-path inset. I will try if Greensock manage it and let you know ;)

 

Giovanni

 

Did you try to use the two CSS plugin?

Link to comment
Share on other sites

Hello gioroc, If you look at the link i provided above for clip it clearly shows on the top that clip is deprecated. So you dont want to use unless you want your code that use CSS clip to stop working once it is removed from the various browsers. That is why you should use CSS clip-path instead so you use the new CSS property.

 

GSAP can only support what is supported in the browser. If the spec shows it is deprecated better to not uses it. GSAP does bridge the gap for supported or buggy implementation of CSS properties. But if a CSS property is set for deprecation, than that means that CSS property is set for not being supported and tells developers to stop using it so when it is removed you don't have broken code. GSAP does a lot to fix browser bugs, but if the browser has buggy or no support for a CSS property, GSAP cant make the browser use that CSS property it does not support. It has to work with what each browser allows. ;)

 

Also be careful with CSS clip-path, especially using inset since that has partial support and Firefox just implemented support for clip-path inset. You can also look here for supported CSS properties.

 

Support for clip-path: http://caniuse.com/#search=clip-path

 

:)

Link to comment
Share on other sites

@Jonathan,

seems that the clip-path property can be used by css, but not by greensock directly (so as written in the paragrah clip in the https://greensock.com/css3/ page). I was using this code as example, even because this code (and the associated codepen) work on chrome and ios. Maybe because is div and not svg?

Anyway, i was looking in other topic and for example here http://greensock.com/forums/topic/13615-clip-path-or-mask-animation you suggest

See the Pen OyarJK by jonathan (@jonathan) on CodePen

, where you use the attr plugin

See the Pen ZppXYG by gioroc (@gioroc) on CodePen

. We both use mask for this test. The only problem that i can see on this approch is that you have to animate 2 vars.

Even

See the Pen bdjoRa by kaplan (@kaplan) on CodePen

, that use clip-path and not mask, he use the attr plugin and animate both y and height.

So i suppose that this is a good way. But i don't know if is the best approch...

 

@WarenGonzaga,

what do you mean?

Link to comment
Share on other sites

This is quite boring... In caniuse i can see that clip-path is not supported in ie10, ie11 and edge.

So i need to write both clip-path and clip, so that all is managed?

Link to comment
Share on other sites

  • Solution

I would just not use the CSS clip property.. Do what you want, you have been warned.  it is better to not use deprecated CSS properties like clip.

 

That link about GreenSock CSS3 was referring to the now depreciated CSS clip property. When that article was written clip-path was not in the CSS spec yet. And that was talking about specific shapes that CSS clip did not support in all browsers. GSAP still animates the clip property if the browser allows it. Webkit based browsers will still allow non standard or deprecated CSS properties. But they will remove that behavior without telling you that is why if you are going to use CSS clip then you do at your own risk of it not working when fully removed. So if you will use clip.. use clip-path going forward.

 

If you are doing clipping or masks.. i would recommend SVG masks since that is fully supported cross browser unlike the now deprecated CSS clip property. And the new clip-path property is still not fully supported for all its basic shapes like polygon, etc.. in all browsers. :)

 

By using the AttriPlugin that is manipulating the attribute since if you look at the SVG markup it uses the SVG <defs> element. And you cannot directly animate with CSS (CSSPlugin) any graphical elements inside a SVG <defs> element per the spec.

 

<defs> element: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs

  • SVG allows graphical objects to be defined for later reuse. It is recommended that, wherever possible, referenced elements be defined inside of a defs element. Defining these elements inside of a defs element promotes understandability of the SVG content and thus promotes accessibility. Graphical elements defined in a defs will not be directly rendered. You can use a <use> element to render those elements wherever you want on the viewport.

So you have to animate the attributes instead with the AttrPlugin. Otherwise you have to remove the graphical elements outside teh <defs> element to aniamte with CSS using the GSAP CSSPlugin which is the default plugin for animating CSS properties.

 

Do you know what I mean? :)

  • Like 2
Link to comment
Share on other sites

Thanks Jonathan,

yes, at the end you confirm what i was doing, so change all as mask and animate the property withe the attributes as the first test that i post.

I'm going to change all ;)

 

One suggest is to add a note on the css3 page, because the browser support text (Browser support: VERY GOOD (Chrome 2, Safari 1.3, Firefox 1, IE 9, Opera 9.2, iOS 3.2, Android 2.1)) and the details link shoul be updated as we said ;)

 

Thanks again

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