Paddy

From what I've read around the site, it sounds as if I could get away with using the basic GreenSock library without paying a penny, but that it would be rather unfair to the people that created such a useful product. I work in the online learning dept of a university (with paying students) and would like to use GSAP to create a few interactive pages on some of the courses. So no student will have to pay directly to use a page containing GSAP code, but the pages will only be available to enrolled students. It sounds like there's nothing to stop me just going ahead, but what would be a fair license to try to persuade the university to sign up to? Thanks for such an enabling product, and such a refreshing approach to licensing.

Hi Zach, thanks for the suggestion. I've just encountered the <use> element here on the Greensock Forum where it's been renamed "the <don't use> element" ! I've been trying out the cloneNode command which I can make sense of, though I gather it might not clone things like fills that are in the <defs> section of the SVG? Are there any other common cloneNode pitfalls I should watch out for? I've started out by creating my SVGs in Inkscape so they're enormous messy things at the best of times, and once I start creating several copies of the same images... Having worked with CSS for the last 20ish years, all those inline SVG styles etc feel wrong! SVGOMG is a bit of a saviour. I'll have a look at the world of <use> too, then hopefully I'll be applying some GreenSock action to a new interactive tool. Thanks again - Paddy

Hi, I'm new to animating SVGs. For this attached one, I'll be moving and re-sizing the colored shapes down the tall vertical tubes using inline SVG, HTML and JS with GreenSock. What little programming sense I have is telling me that creating an SVG with 4 tubes and twelve colored shapes is breaking the "Don't Repeat Yourself" rule. Can anyone give me some pointers on the "correct" way to create duplicate graphics and show/hide between one and four on screen at once? Can I create just a single version of the colored square (with the graduated fill) and create a number of different colored versions (which I can animate separately) by changing a color attribute without losing the other fill stop colors/positions? They'd all need different IDs of course - would I generate the SVG code using JS? I hope that all makes sense. Thanks - Paddy burette-tryout-opt.svg

Thanks for tips, Zach, though even I don't write For loops that way - it was codepen that did it with its auto-format on the js!! ? (though starting at 0 was my mistake) "set" is useful to know about; I find programming docs a bit overwhelming so I miss things like this. You think this SVG isn't clean? You should see the ones I was working with the day before! There were <g>s with transforms inside <g>s with other transforms and loads of other stuff generated by Inkscape. I made this one just by copying the d="" info from the paths I created in Inkscape, so I was surprised to find that I was still having trouble getting the motion path right. When I put it where the motion should happen, the circles are way off to the bottom right. I don't understand what's causing this. I guess I'll try again with a very simple SVG and see if I can make it happen again. Re variable scope, do you mean that setting aniDuration in readiness for the second gsap.to() command will alter the duration of the gsap.to() command that's already started? Thanks again, Paddy

Oooh, that took a bit of puzzling out, Mikel. Thanks for putting together an interesting different technique. So you've used two motion paths and two identical circles, the second of which goes behind the first motion path. I wouldn't have thought of doing it that way. I do notice a little jump in motion between the two motionPaths.

Thanks all. Your demands for a code-pen have spurred me into building a much smaller and tidier version, but still using the moving-the-mask technique that I mentioned earlier. And it also highlights the problem I've had with my motion path not working when I put it where I think it should be. Any suggestions for how to do all of this better would be appreciated, though I'm very new to all this, so I might not be able to take on everything all at once... Hopefully this codepen link (my first ever) will work: https://codepen.io/puob/pen/gOpvWob

So would I use gsap.to("#redMaskHandler", {display: "none", duration: 0, delay: 7}); and gsap.to("#redMaskHandler", {display: "block", duration: 0, delay: 7}); ? Thanks.

I've got a mask (redMask) that works fine, but I'd like to be able to turn it on/off. Currently I'm moving the mask it so that it no longer masks my animation, which works, but it just feels like the wrong way to do it. gsap.to("#redMaskHandler", {y: -31, duration: 0, delay: 7}); I'd originally thought I could change the opacity but, of course, that hides my animation entirely. Ideally I'd be able to remove or reapply redMask from the group I've applied it to. Thanks (sorry I'm not able to share this in CodePen)

... can I aspire to become a "full sock" one?

Definitely an extra point for the timeline, Carl. Thanks.

Superb! Thanks - I'd just found out some of that, but I hadn't found the default option - that'll be really useful.

I hope this is a fairly simply question I'm moving an item like this gsap.fromTo("#graphMaskHandle", 60, {x:-155}, {x:0}); It seems to start moving more quickly then slow down as it goes on. Is there some kind of easing on as default for gsap? If so, how do I turn it off and get linear motion? If not, any ideas what's going on? (I'm forbidden from sharing my code on CodePen, unfortunately) I'm using it to reveal a graph over a 60 second period, so the graph needs to be revealed to match up with "seconds" on the x axis. I'm a newbie to green sock; I'm finding it brilliantly useful, but, on top of my poor maths, I'm having a bad day with this. Any help would be appreciated.

Thanks for suggestion; I've got into trouble previously over sharing what I'm working on, hence no CodePen. I had another look and removed the transforms on my coloured shapes and they seems to be animating in the right places now.

Hi, I'm new to Green Sock and to this forum (and new to SVG animation too!) Green Sock is making it possible to do things that would stump me if I tried doing using other methods. I'm trying out motionPath, but I've found I've had to move my motion path (the pink line in the attached image) to get the motion to happen in the black shape. Can anyone suggest what I'm doing wrong? I suspect I'm doing an unnecessary translation or scale somewhere but I don't yet understand SVG code well enough to spot it. (the graphics were drawn in Inkscape originally) Thanks in advance - Paddy Here are some relevant parts of the code: <path id="animationPath" style="fill:none;fill-opacity:1;stroke:#ff00f7;stroke-width:0.21282795;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" d="m 0.5,3.1 c 0.1,0.1 -18.7298199,88.015311 36.5651001,78.835771 7.69427,-1.20978 17.49192,-4.68442 21.99463,-9.21188 5.30664,-5.7414 7.468,-8.352641 7.47701,-20.101821 8e-5,-14.54837 -11.86949,-25.94952986 -27.66693,-25.94947986 -15.79744,-4e-5 -26.9913601,11.91775986 -26.9913101,27.71519986 0.0133,8.14082 2.92998,23.248381 29.1769301,27.535251 47.76889,4.27096 43.47137,-46.1381609 32.86151,-99.135311" inkscape:label="#path888-5" inkscape:connector-curvature="0" sodipodi:nodetypes="ccccsccc" /> ...... <rect style="fill:#ff0000;fill-opacity:0.70588235;stroke:none;stroke-width:1.44497728;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" id="redShape" width="7.8197494" height="9.973732" x="9.415514" y="-2.6867492" ry="1.7497774" transform="matrix(0.98797435,0.15461785,-0.31145717,0.95026019,0,0)" inkscape:label="#rect845" /> ........... </svg> gsap.to("#redShape", { motionPath: { path: "#animationPath", autoRotate: true, alignOrigin: "0% 50%" }, transformOrigin: "50% 50%", duration: 9, ease: "power1.inOut" });