Preefix Posted March 17, 2021 Share Posted March 17, 2021 Sup, I wanted to animate my logo an my website using the gsap object. I coded a demo using the DrawSvgPlugin which is available in Codepen. Since I am not a club member I can´t access it and wanted to ask what would be the workaround here to achieve the same effect. Here is the same appraoch using the DrawSVGPlugin: See the Pen ZEBNWgx by Preefix99 (@Preefix99) on CodePen I appreciate any inputs. Thanks in advance. See the Pen eYBaBQy by Preefix99 (@Preefix99) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 17, 2021 Share Posted March 17, 2021 Hey Preefix. Providing free alternatives to our paid products doesn't make much business sense for us. It would remove one of the primary reasons for joining Club GreenSock, the very thing that enables ongoing support and development. To understand why this is GreenSock's model, read our "Why license?" post. Keep in mind that a Club GreenSock membership also gets you access to all of the other super helpful Club GreenSock plugins. Usually people find that a membership pays for itself in a matter of days. Also keep in mind that if you're unhappy with your purchase we offer a money-back guarantee. 6 Link to comment Share on other sites More sharing options...
PointC Posted March 17, 2021 Share Posted March 17, 2021 Just FYI. You can make this happen without DrawSVG by getting the total length, but DrawSVG solves a lot of browser inconsistencies and bugs for you. Calling <path>.getTotalLength() in IE locks the repaint area of the stroke to whatever its current dimensions are on that frame/tick. Firefox will throw an error if you try calling getBBox() on an element that isn't visible (which you may need to do to calculate the length for normal shape elements like <rect>, <line>, etc. - DrawSVGPlugin works on all those shapes so you don't have to use a <path>) Microsoft Edge has a bug that causes it not to redraw the path correctly if the stroke-linecap is anything other than "butt" (like "round") and it doesn't match the stroke-linejoin. Firefox doesn't always return an accurate getTotalLength(), causing things to be a bit short at times. Some browsers render artifacts if dash is 0. When the element has vector-effect="non-scaling-stroke" and the SVG is resized (like on a window resize), it actually changes the length of the stroke! DrawSVGPlugin can automatically adjust. A bug in Safari causes strokes with rounded ends to still show initially when they shouldn't. You can't getTotalLength() on other shapes besides a <path> (like a <rect>, <circle>, <line>, etc. IE and Firefox have some bugs that cause <path>.getTotalLength() not to work properly. My advice would be the same as @ZachSaucier's advice. Join Club GreenSock and save a bunch of time and frustration. Happy tweening. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now