ro-achterberg

It's been a while, but today I managed to find a fix for this. It seems that for embedded SVG's (meaning, NOT included via an <img> or <object> tag), you have to be very explicit about the address of any url or href property you may have. I previously assumed that my <base> tag would take care of any svg URL resolving, but this doesn't seem to be the case. I eventually fixed this by making all url and href properties refer to an absolute URL. This made the logo animation work on all underlying pages, and not just the index page.

I have some SVG that resides directly inside my HTML (no object/img are used). I use jQuery and GSAP for the animation, which works fine. That is, until I load the animation from a URL different from the site root URL. In which case only part of the animation works (??). Works: http://www.brigaid.nl/staging/grahamskitchen/ Does not work: Works: http://www.brigaid.nl/staging/grahamskitchen/menu-wijn/ (Latest Chrome, Firefox) I'm sorry I can't be more elaborate about this, because it has me completely stumped. It almost seems like a 'same origin' issue, but I really can't see how that is the case. The SVG is directly embedded and everything is loaded from the same base URL from a remote web server. Please note that I cannot create a pen for this, because the problem seems to be directly related to this specific setup. Hoping for some bright insights!

Hi Carl, Thanks again for your elaborate response. I actually just managed to fix it myself. It turned out to be quite a trivial case of adding some vendor prefixes. The reason for 'mixing' technologies is to keep things as lightweight as possible. But this is still fairly rough and patchy testing code. Before this goes into production, I will try to stabilize it as much as possible. Although all of my target platforms already seem to be behaving properly with this. I do however aim to always produce clean, reusable and testable code. And as you're making some valid points in that regard, I will take them into consideration while refining! Best regards, Ro

Dear Jack, Thank you for your elaborate response and please excuse my late reply. I've been working hard and wanted to come back to the forum with something useful to share. I have found a solution to my problem in the mean time, which involves animating an SVG mask, using the familiar 'stroke-dashoffset trick'. However, I think the specific brew of techniques I ended up with differs from what I've seen before. So I'm including it here, hoping that it may be of help to somebody else: http://codepen.io/anon/pen/bpNpVQ Interestingly though, I've heard from numerous people that the animation (or parts of it) isn't working on their various modern phones. This is despite CSS support tables @ caniuse.com showing that they should work. GSAP also claims to be compatible with 'older' browsers ('wizardry', 'even IE6'). I totally understand that GSAP cannot solve all incompatibilities or provide a polyfill to plug every hole, but as far as I can tell, I'm not doing anything too exotic for Android/iPhone 4-6 Safari/Chrome. What am I missing to make my GSAP or SVG code compatible with these devices?

I'm sorry, clearly I came to the wrong forum to ask my question. As far as I know, the major part of GSAP is free. If you don't provide support for the free section, then please be more clear about that. I wouldn't have come to you with my questions in the first place. Please note that I never asked you to provide me with free samples. Also, I will be the sole judge of the amount of time I spend on learning new technologies. I'm a capable developer and I've acquired all my skills through many years of self learning. I'm more than willing to spend two or more days gaining new knowledge that will last me a few years. However, at no point have I said that I was never inclined to pay for a membership, which I may still do some time in the future. Quite frankly however, it astonishes me that my inquiries were taken as a way to parasitize on the goodwill of the forum support section. Reading the staff responses, I find it disappointing to see that the only agenda you seem to have with this support, is to push paid memberships. This only makes me reconsider making my projects dependent on a proprietary third party solution like GSAP. A different approach to providing your feedback would have likely made me a long time paying ambassador. These are just my two cents, hoping that it will help you better communicate with people like me in the future.

Carl, at no point did I ask you to recommend any free solutions provided by others. I'm a developer/designer myself of 20+ years experience. I thoroughly understand and appreciate all the time and effort that goes into creating something useful from scratch. As far as I understand, GSAP is a rich library that offers a lot of options. Forgive me for sounding a little cynical, but I need to make sure that I'm not spending money needlessly. So just to round this up, could you confirm to me that using DrawSVG is the only way *GSAP* can help me out? Please understand, I have to weigh my options here.

Carl, thank you so much. This seems to be exactly what I need. I'm just wondering though, does GSAP only support this type of animation through paid membership?

Thank you. I set up this pen to illustrate what I've been struggling with. At one point, I tried using a CSS clip-path, using a polygon for the mask. I could get it to animate, but only on Chrome and it wasn't working at all the way I wanted it. Reading the docs on TweenLite.to(), I'm unsure whether GSAP also requires the target polygon data to have the same number of points, as was required by the (now deprecated) CSS implementation. For safety, I did so anyway. Using GSAP, the mask is animating, but not yet the way I need it to. Reading the docs, I'm unsure on how to proceed :/. Just to make sure, what I need is for the clip-path polygon to appear from top to bottom, following its center path (if that makes sense).

Thank you for your suggestions. I have successfully animated part of the object, using a CSS @keyframe animation. I was able to do this by using a rectangle shape in the clip-path, for which I simply animated the width from 0% to 100%. But I'm still having trouble with the curved brush as shown in the attachment. I've also included a (crude but functional) polygon mask, shown in separate phases of the transition, to hopefully better explain my situation. Maybe I'm missing something, but all of your suggestions seem to involve basic shapes, which to me seem incapable of producing the reveal animation that I'm after. I need the entire 'G' to be 'drawn/painted' onto the screen. So the polygon mask needs to be gradually removed, simulation a brush stroke. With the risk of this becoming a tedious question, I very much hope to hear some opinions on a (GSAP) solution to this. Many thanks!

I've been struggling for two days with a 'reveal' animation of a curvy brush stroke. All my efforts of animating a clip-path or mask for this have failed so far. My latest idea for this is to use a clip-path, using the dashoffset 'trick' on its stroke to gradually reveal the entire shape. I've tried and failed using conventional CSS/SVG. Would GSAP be able to help me out with this? Any insights would be hugely appreciated!