gioroc

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

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?

@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 the code in this codepen, where you use the attr plugin as my codepen test. 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 in this 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?

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

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 create this working 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!

Hi Fagan! With firefox on mac i can't see the problem you told on the codepen. Anyway, why don't you clip it? so there is no more problem?

Hello Jonathan, thanks for the welcome and for the help! The GSAP SVG Tips is my favourite page and is bookmarked since the begin of my GreenSock travel I will read in the doc page you send me (until now i had just read the part that i need and not all the page). For the use of svgOrigin and not transformOrigin, i will try! But, according to Dipscom suggest, cleaning all the transform in the svg file i have all more easy Thanks!!

Hello Dipscom, thanks for the help! Yes, i think that the main problem is about the transform translate that i have on my SVG. I'm use to organize the group and id with Sketch, save the SVG and then clean it with svgomg (usually with params Prettify code enable and compare gzippend and clean ids disable, all the other as default). But the transform translate still remain in the SVG. Do you have any tutorial or idea to understand how to clean them? Thanks! Giovanni ps: one question about the forum. Can you see the codepen or not? i haven't understand...

Wow, my first post on GreenSock forum! Hello everybody!!! After long studies and offline test, i had try something more "advanced" (for me). I want, starting from a free svg that i found online, animate a robot. In the codepen url you can find my first test. All work fine, but i hate the starting setting with all the reset for the head and arms of the robot. I think that should exist a better and cleaner solution to do the same things! I have try to play with transformOrigin and svgOrigin, but i can't see real difference. Maybe i haven't understand it really... Can somebody help me to optimize the code and make it better? So i can learn new things... One final question about the legs. Which is the better solution to have the legs comparing from the top of the body? Here i try with scale, opacity and origin. In pure js i would make them position absolute and then animate the height. Which is the solution that you should deploy? Thanks to everybody!