jasecore

Thanks! I have it working now how I want. Not sure if it's the right way, but it's working. The one thing I still do not understand is the gsap.registerPlugin(DrawSVGPlugin); I comment that out and leave off "gsap" on gsap.to("#path", { drawSVG:"100% 100%" .....})and it works fine. I leave both in and I get error: main.min.js:1 Uncaught ReferenceError: DrawSVGPlugin is not defined. I'm attaching the mini.js in my assets folder and it works fine it seems when I leave off gsap.register

@geedix Just an update...I got it working how I'd like.

Geedix...I was able to edit YOUR code pen to work the way I wanted to. <div id="drawSVG"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" version="1.1" viewBox="0 0 300 250" xml:space="preserve"> <defs> <style> .cls-1 { stroke: #97baff; fill:none; stroke-width:10px; } .cls-2 { fill: #4cff45; } </style> </defs> <!-- Generator: Adobe Illustrator 28.7.1, SVG Export Plug-In . SVG Version: 1.2.0 Build 142) --> <g > <path id="path" class="cls-1" d="M-21.956,123.558s135.221-57.508,175.72,28.401c22.854,63.991-58.506,67.648-47.38,12.397,20.222-98.306,216.707-127.06,216.707-127.06"/> </g> </svg> </div> gsap.registerPlugin(DrawSVGPlugin); gsap.from("#path", { drawSVG: 0, duration: 1, delay: 0.5 }); gsap.to("#path", { drawSVG: 0, duration: 1, delay: 3.5 }); This all works EXACTLY like I want it to work on YOUR code pen. When I put that into my code pen it does not. I get uncaught ReferenceError: gsap is undefined. I just cannot wrap my head around why it works on your end and on my end I'm writing the exact same code and it's broken. Why? Why? Why?

Geedix...I was able to edit YOUR code pen to work the way I wanted to. <div id="drawSVG"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" version="1.1" viewBox="0 0 300 250" xml:space="preserve"> <defs> <style> .cls-1 { stroke: #97baff; fill:none; stroke-width:10px; } .cls-2 { fill: #4cff45; } </style> </defs> <!-- Generator: Adobe Illustrator 28.7.1, SVG Export Plug-In . SVG Version: 1.2.0 Build 142) --> <g > <path id="path" class="cls-1" d="M-21.956,123.558s135.221-57.508,175.72,28.401c22.854,63.991-58.506,67.648-47.38,12.397,20.222-98.306,216.707-127.06,216.707-127.06"/> </g> </svg> </div> gsap.registerPlugin(DrawSVGPlugin); gsap.from("#path", { drawSVG: 0, duration: 1, delay: 0.5 }); gsap.to("#path", { drawSVG: 0, duration: 1, delay: 3.5 }); This all works EXACTLY like I want it to work on YOUR code pen. When I put that into my code pen it does not. I get uncaught ReferenceError: gsap is undefined. I just cannot wrap my head around why it works on your end and on my end I'm writing the exact same code and it's broken. Why? Why? Why?

Hi Geedix! Thanks for the help! I've been messing with the forked pen. I just want the path to animate on and off. I do not want the "top" and "bottom" of the path to animate. Just the flat loop. Loop, loop off. I am not understanding why it's being a pain for me. I tried swapping the template and path (They are the identical path in Illustrator). Should I NOT expand the SVG in AI before I save the SVG? I just don't understand why it isn't just drawing a flat line...I don't want the outline...just the line. Also...I'm including the mini.js file of DrawSVG, do I still need to register it? <script src="assets/js/DrawSVGPlugin.min.js"></script> When I put that line of code: gsap.registerPlugin(DrawSVGPlugin); I get errors: Uncaught ReferenceError: DrawSVGPlugin is not defined at main.min.js:1:21. When I leave that out it draws the SVG just not how I want. When I try to use .fromTo("#path", {drawSVG:"100% 0%"}, {duration: 1, drawSVG:"100% 100%"}, 5) I receive this error: gsap.min.js:10 Invalid property drawSVG set to 100% 0% Missing plugin? gsap.registerPlugin() I literally just want the loop draw in like someone drew the loop on paper from left to right. And then after about 3 seconds, I want the loop to disappear like it's being erased from left to right.

All I want that loop to do is draw on and then draw off. 1. animate on from left to right, 0-100. 2. animate off from left to right.

I'm having problems getting DrawSVG to draw my simple SVG. And I need to get this working ASAP. Please help!!!! I'm getting this error: main.min.js:1 Uncaught ReferenceError: DrawSVGPlugin is not defined at main.min.js:1:21 ------when I have this line of code in my js file "gsap.registerPlugin(DrawSVGPlugin);" PRV_MA_BAA_A60_CMR_DIG_EN_BeThereCircleAni_300x250_NA_DISP_ALT.zip

Hello all. I've tried to find a solution here and all I found were rants about what I'm currently experiencing, but no real solution laid out. I'd like to use DrawSVG for a simple animation in a digital display ad (banner). The problem is....you guessed it...I cannot figure out how to install or link or whatever. Video shows the girl using terminal to install and all that jazz. I'm using Brackets and maybe I'm just clueless, but this shouldn't be so hard. Can't I just upload the DrawSVG.js file in the package folder to my server and link to that in my banner?