Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Paddy

Members
  • Content Count

    14
  • Joined

  • Last visited

Community Reputation

8 Newbie

About Paddy

  • Rank
    Member
  1. 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
  2. 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
  3. 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 differe
  4. 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 Inkscap
  5. 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.
  6. 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
  7. So would I use gsap.to("#redMaskHandler", {display: "none", duration: 0, delay: 7}); and gsap.to("#redMaskHandler", {display: "block", duration: 0, delay: 7}); ? Thanks.
  8. 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)
  9. ... can I aspire to become a "full sock" one?
  10. Definitely an extra point for the timeline, Carl. Thanks.
  11. Superb! Thanks - I'd just found out some of that, but I hadn't found the default option - that'll be really useful.
  12. 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 gre
  13. 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.
  14. 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 - Padd
×