Jump to content
Search Community

Clip-path or mask animation?

ro-achterberg test
Moderator Tag

Go to solution Solved by ro-achterberg,

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

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!

See the Pen MKQzmj by anon (@anon) on CodePen

Link to comment
Share on other sites

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!

post-41479-0-43341900-1453733072_thumb.png

Link to comment
Share on other sites

The SVG mask example i showed was a basic shape yes, but the GSAP technique it does can be used on any SVG shape or image, not just a basic shape. I suggest you look at the example and see that it doesnt matter what shape or image the SVG Mask filter works on. GSAP will animate it regardless of the shape. It was provided to show you the concept of using GSAP to animate a SVG mask. Now what SVG mask shape or image you use, is up to you. :D

 

My example uses the GSAP AttrPlugin to animate the SVG mask within a SVG <defs> element. Normally GSAP will animate CSS, but in my example you will see that i wrap my attributes in a attr:{} object, to tell GSAP that the property is an attribute.

 

GSAP can animate any numerical property. It is only limited by what the browser supports, which is not GSAP's fault.

 

The same technique I used above to animate a SVG mask can be used on the <clipPath> element inside the <defs> tag, by using the GSAP AttrPlugin

 

Keep in mind that in order to animate elements inside a SVG <defs> tag you must use the GSAP attribute plugin, like i did in my mask example above. Since the SVG <defs> tag is not rendered directly with CSS based on the SVG spec. You must animate the attributes directly inside the <defs> element, by using the  GSAP AttrPlugin.

 

I suggest you look at my example again and look how the animation was done with GSAP, dont worry about it being a simple shape, since the shape is just a child being animated, so you can use whatever shape or image you want. So i would worry more about the technique we are showing you and learn the concept so it can help you understand GSAP.

 

Also you could also try the DrawSVGPlugin found here: http://greensock.com/drawSVG

 

Please provide a codepen with some GSAP code you have tried so we can better help you, Thanks :)

 

Resources:

GSAP AttrPlugin: http://greensock.com/docs/#/HTML5/Plugins/AttrPlugin/

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

  • Like 4
Link to comment
Share on other sites

Thank you. I set up

See the Pen MKVaPJ by anon (@anon) on CodePen

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

Link to comment
Share on other sites

Thanks for the illustrations, very helpful.

 

Like Jonathan mentioned, I think for the best results you can use our DrawSVGPlugin and have it animate a path that masks your brush stroke.

 

Here is quick example:

http://codepen.io/GreenSock/pen/f4d3f1a838325d284db7eb7a250cb558?editors=0010

 

In illustrator the artwork looks like this: http://prntscr.com/9upljx

 

The thick stroke (50% white) is what is being animated to reveal the green brush stroke beneath it.

 

Learn more about DrawSVGPlugin http://greensock.com/drawSVG

 

DrawSVG plugin is a bonus plugin for Club GreenSock members.

  • Like 5
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Hi ro-achterberg  :)

 

yep , there's a way to do that without DrawSVG , via GSAP , but there is a point :

 

don't forget GSAP fixed some Browser's SVG related bug in DrawSVG plugin and your project will works correctly in every browser . without that you have to consider about thaking the risk of how some browsers are dealing differently with SVG stroke , dash offset , ... etc

  • Like 2
Link to comment
Share on other sites

Carl, at no point did I ask you to recommend any free solutions provided by others.

 

Ok, since you are just looking for a free solution provided by us, please allow me to explain why that puts us in a difficult position.

 

Let me start by saying that the reasons some plugins are not freely available is because they:

  • take time to build properly
  • solve very unique problems
  • undergo rigorous cross-browser testing
  • have proven value in how much time they will save users

 

To recap how we got here:

  • You came to our company forum asking about a solution to a very particular problem
  • I created a custom demo for you illustrating how one of our products solves that problem
  • Of equal significance, multiple community members eagerly tried to help

Since DrawSVG is doing something in GSAP it absolutely is possible for you to write code similar to the plugin and get the same result. For me to tell you in a public forum how to do what DrawSVG is doing without having to buy DrawSVG just isn't in line with our business principles / goals. Our Club Memberships are the literal lifeblood of this company. 

 

Forgive me for sounding a little cynical, but I need to make sure that I'm not spending money needlessly.

 

I understand, but it's also worth considering how much of your time (or your clients' money) you are willing to spend needlessly.  I can say with absolute confidence that DrawSVG alone will save you a day of your time investigating and reaching the limits of other options. 

 

Also, keep in mind that you can fork any our demos that use our bonus (paid) plugins and try them for free in CodePen. Feel free to use one of these as a starting point for DrawSVG: http://codepen.io/collection/DYmKKD/

 

Anyway, that's about all the hard-sell I can do right now.

I encourage you take DrawSVG for a spin, If you purchase it and don't like it we'll gladly grant a refund.

  • Like 1
Link to comment
Share on other sites

If I could throw my 2 cents worth out here...

 

I always find discussions like these quite puzzling. It seems like a simple math problem to me. What is your hourly rate? How much time will you save by purchasing a membership? You're talking about $50 for the needed plugin here and I find it difficult to believe that it wouldn't save you $50 worth of time on this project and then you have it available for your next job too.

 

This whole thread started with the words "I've been struggling for two days" so right there you know this plugin would have been a huge time saver so why spend even more precious time trying not to spend a few dollars? On top of that, Carl has built a nice demo to get you started. Beyond that, you know you can always jump back here to the forum and get advice from mods and members absolutely free. Seems like a pretty easy decision to me.

  • Like 5
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

This is the right forum. All of our support is free of charge. We support our free and paid products here equally. 

 

Please note that I never asked you to provide me with free samples.

 

No problem, we do our best to exceed expectations for all users.

 

I find it disappointing to see that the only agenda you seem to have with this support, is to push paid memberships.

 

Paid memberships are only advised when they solve the problem at hand. I'd encourage you to research the discussions in these forums. I think you'll find that it's very rare that we push anything around here.

 

After my first answer didn't suffice I simply assumed you needed a deeper explanation of my hesitation in offering a less-capable, free solution. Sorry if that sounded pushy.

Link to comment
Share on other sites

@ro-achterberg, you sound a lot like me: a guy who doesn't like just throwing money at some pre-packaged plugin rather than digging in and understanding (or at least trying really hard to understand) the inner-mechanics and the "why" behind things. I get it. In fact, I make GreenSock tools for guys exactly like you. They're not aimed at the typical jQuery plugin consumer - they're made for top-level animators who have put the time in to understand the challenges and noticed that GSAP solves them as well as (or maybe even better than) they'd do for themselves. Perhaps that's why almost every award-winning "site of the year" since GSAP was introduced has used it. The folks who build the wiz-bang sites tend to be a lot like you and me in terms of seeking a deeper understanding before committing to a toolset. Maybe it gives you a little comfort knowing they tend to be big GSAP fans. But alas, if you're like me, that probably doesn't quite satisfy :)

 

Personally, I have a strong aversion to using libraries because I like to build all my own stuff from scratch. However, there are some exceptions. When I come across a tool that impresses me enough because of the sheer volume of work it requires (like THREE.js), I recognize it's smarter of me to just let the experts handle all that fine-tuning and 3D math rather than me re-inventing the wheel. But I at least go far enough to understand a lot of the mechanics before I decide "yep, I'm better off entrusting that to them."

 

Like Carl said, please poke around the forums and familiarize yourself with how we typically run conversations around here. We are very careful not to be pushy with getting people to sign up. The vast majority of people who come here and get help don't pay a dime...ever. And yet we (and the amazing moderators) do our best to serve them nevertheless. A lot of business people I've talked to are shocked that we operate this way (they think it's stupid of us). We, however, believe it's all part of what we stand for and what we try to deliver as a brand. Trust is very important to us which is also why we get so discouraged when we hear a response like yours, indicating that we disappointed you. It's a big deal to us. 

 

Carl and I exercise a lot of restraint when it comes to talking about the bonus plugins but it's very difficult because often they are EXACTLY what is needed in that moment. We put so much time and energy solving a particular challenge and then when the need arises, we want to gush about how well this bonus plugin solves things for the user, and avoids major headaches. But we risk sounding "pushy", so we try to tone it down or not say much. Perhaps Carl relaxed his filter here, but I really believe he was offering the best answer he possibly could. He had your best interest in mind, not just funneling some $ into our pockets (frankly, one membership is a drop in the bucket compared to all our expenses).

 

We absolutely, positively don't want anyone to sign up who's not thrilled with the value they receive. We want rabid, loyal fans. The forums don't serve as a promotion venue - we only mention a bonus plugin when it's very clearly beneficial to the end user. 

 

One piece of background that might help shed some light on Carl's initial response (which I still think was rock solid, though I don't blame you for feeling like it was a hard-sell): most people in the forums are extremely respectful and kind, but we have occasionally had people show up here who literally asked us to give them a tutorial on how we built one of the bonus plugins, what it does, and how they could basically copy it themselves so that they wouldn't have to pay any $ for it. Seriously. No kidding. We even asked them to confirm that's what they were asking, and...yep. It can feel like quite a slap in the face when we try so hard to provide so much for free and devote our full-time careers to building these tools that solve various problems and they turn up their nose at pitching in $50 and instead want us to burn hours more of our time explaining how to replicate our efforts to avoid paying us for all the time we invested.

 

I totally understand that you weren't doing that but part of the conversation started smelling a little bit like that and I suspect that's what drove the response. Answering how you could do it without the plugin would essentially lead us down a similar path, like "you could do it like ___ but then IE has this bug that you'll need to work around with ____ and Firefox requires _____ and structurally it's more efficient to do the computations like ____..." and pretty soon it's a tutorial on how we built the plugin and all the "gotchas" we solved...along with the blueprints that make it easy to avoid signing up (a pretty horrible business practice). But again, I understand that you didn't mean it that way at all. 

 

I really like PointC's comment about it ultimately boiling down to a math equation - how much is your hourly rate, and how many hours might this save you? But I guess that only matters AFTER you've been convinced that you can trust the tool (and its authors), and that you've done enough research to determine that it's not worth doing yourself. 

 

I'm sorry about the disappointment you experienced here, but I sure hope we can earn your trust and loyalty at some point. And please keep in mind that you're very welcome in these forums - you won't be looked down upon if you're not a paying member. We're here to help as best we can. 

 

Happy tweening!

  • Like 9
Link to comment
Share on other sites

  • 1 month later...

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:

 

See the Pen bpNpVQ by anon (@anon) on CodePen

 

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?

Link to comment
Share on other sites

Hello ro-achterberg, I believe your code is different since it is mixing various vanilla javascript, jQuery and GSAP. Which is fine, but it can get hairy when you are changing and applying properties and values outside of GSAP. Then you would have multiple things competing to apply properties and values on your elements.

 

So the following is just an observation when i look at your code:

  • I see that your changing CSS properties and SVG attributes outside of GSAP. For example your setting the initial stroke-offset with native javascript to set stroke-offsets. If it was me, i would use the GSAP set() method to set that initial stroke-offset values.
  • The JS method getTotalLength() has browser bugs especially in webkit based browsers (mobile and desktop) and also in firefox desktop version.. So be careful when using it. It could return either 0 or return the wrong value.
  • Your mixing and applying CSS transform with jQuery css() method, instead of using the GSAP set() method to set your CSS transforms. So this way GSAP knows what you set outside itself. jQuery is terrible at applying transforms since you need to specify various vendor prefix's for webkit, etc. For example you use jQuery css() to set the transform property. But most mobile webkit browsers (mobile Chrome and Mobile Safari) need the webkit prefix .. ie .. -webkit-transform .. GSAP will set the various CSS vendor prefixes unlike jQuery
  • I see that your using jQuery animation queue() system, instead of controlling with GSAP. The jQuery queue() functions are really to be used when using jQuery animation methods like animate(), slideToggle(), etc..
  • Since your not using DrawSVG which can do a lot of all the heavy lifting regrading cross browser compatibility and poly fills. That is another thing on why it probably is not working on cross browser mobile devices.. since each browser behaves differently with various behavior and bugs. But GSAP already creates polyfills for SVG.. MorphSVGPlugiin and the DrawSVGPlugin.
Those are just a couple of things I see with your animation code. But I see your using jQuery which is a cross browser javascript library that creates various polyfill methods to fix and solve cross browser inconsistency. That is pretty much what GSAP is.. it is a cross browser animation platform creating polyfills and various checks to fix bugs and inconsistency in modern browsers when animating DOM and SVG elements. As well as any javascript object and property.

 

Resources:

GSAP set() method: http://greensock.com/docs/#/HTML5/GSAP/TweenMax/set/

 

:)

  • Like 3
Link to comment
Share on other sites

Jonathan covered pretty much everything I'd want to say :) And yeah, there are several tricky browser-specific issues when dealing with the strokeDashoffset and getTotalLength() stuff, including in IE. Annoying, I know. We've worked around a bunch of them in DrawSVGPlugin so that it "just works". I'd be curious to know if you're able to get it working properly by ditching the vanilla JS and jQuery approach you're taking and using DrawSVGPlugin instead. 

 

Also, I'm curious what you were intending to do with this code:

timelineL.tweenFromTo(
  0,
  timelineL.duration(), {
    ease: Quad.easeInOut
  }
);

Typically a tween has a target, a duration, and some sort of property or properties that it should tween. In this case, it seems like you're trying to animate the literal number zero, applying an ease, but no properties whatsoever (so it wouldn't actually do anything). Again, just curious. There were a couple of those tweens in there that I noticed. 

 

We do our best to make GSAP "just work" in all browsers, but it cannot do things like make IE6 support SVG and stroke-dashoffset because that's a browser-level thing with no workarounds. We did it for transforms by using an IE-specific filter and a bunch of math. So I wouldn't expect the SVG stroke-dashoffset to work in super old browsers (not that you were). 

 

Were you saying that your demo didn't work for you in Safari? Certain iOS or Android devices? What browser versions? The more specifics you can provide, the more we can help you. 

  • Like 3
Link to comment
Share on other sites

In addition to the great suggestions above, I was unsure of what exactly we were supposed to see "not working" in the demo.

I opened up the demo on my iPhone 6 and saw the strokes of L logo animating fine. I then saw that there was quite a bit of code and wasn't sure where we should be focussing  our attention on.

 

I think it would help greatly if you could reduce the demo so that just the parts that aren't working are present. If 5 strokes aren't animating, just cut it down to 1.

If the text isn't related to the issue just remove it from the SVG.

SVGs by their very nature are very verbose and cryptic. The more you can cut down the SVG and associated JS the better chance we will have at helping.

 

The one thing I noticed on the phone is that the 3 lines of text were not animating. Under further inspection it seems you are defining CSS transitions inside the <SVG>. I'm not so sure what the browser support for that is, but to avoid any trouble be sure you are not animating the same elements with CSS transitions and GSAP.

  • Like 1
Link to comment
Share on other sites

  • Solution

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

  • Like 3
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.
×
×
  • Create New...