binarybhu

Hi again. Thanks for all your help, I've solved it! It was an incorrect styling for circle[fill] coming through a stylesheet - nothing to do with GSAP/MorphSVG/DrawSVG at all. God I spent hours on that!! But it was great to get the tip about hiding stuff then bringing online with autoAlpha - that is super handy. I really appreciate all your help - MorphSVG and DrawSVG are amazing - we are going to use them for lots of stuff in the future I reckon. When I push the site live next week I'll post the link here so you can see it in action. Cheers

I suppose my first problem is when the SVG is first rendered on the page, which is just before the animation starts, the LHS quadrant is there, and I don't want it to be visible before the animation begins, as the idea is I start from nothing and the quadrant grows to a full quarter circle. If you look at this pen here (which I forked from your pen) https://codepen.io/bhuvidya/pen/QWQNNaN I do a 5 second delay before the animation begins to accentuate my problem. Is there anything I can do, such as change my SVG file markup for that circle element, to achieve this? Thanks heaps!

I am so close to getting this done! Website releases next Monday so I am desperate!!!

Sorry I didn't fully explain - I want the LHS circle to be invisible initially, and then fan out into the full quadrant. So the DrawSVG animation does this, but the circle element in the SVG is visible initially, and stays visible, and I can't work out how to deal with this.... Thanks! PS I got the file upload to work now too - so attached is a screenshot of the LHS animation allowed to run to 87% instead of 100%, so you can see the smaller quadrant sitting underneath. So weird.

Hi again! We subscribed to Shockingly Green, got the plugins, I got them integrated into Nuxt fine, but there is just one anomaly with the animation that is driving me nuts. The LHS circle is visible when the logo is first displayed on the page; you can see the full circle quadrant. Then when the LHS animation with DrawSVG starts, that initial circle shrinks to about half its initial radius, while the circle animation that I actually want to see starts and ends properly. And yet there's only one circle element in the SVG!! I verified this in Chrome devtools. I attached a screenshot with the LHS animation tweened to "drawSVG: "87% 100%"" instead of "drawSVG: "100% 100%"". I can't do a codepen cos it uses DrawSVG, but here's my SVG markup: <svg id="logo" xmlns="http://www.w3.org/2000/svg" width="420.7448" height="241.5" viewBox="0 0 420.7448 241.5"> <circle id="logo-animatable-lhs" r="112" cx="0" cy="240" stroke="#231f20" stroke-width="224" fill="none"/> <polygon id="logo-animatable-rhs1" points="420.74503 240.66667 419.91173 240.66667 419.91173 241.5 420.74503 241.5 420.74503 240.66667" fill="#231f20"/> <polygon id="logo-animatable-rhs2" style="visibility:hidden" points="420.74511 158.8462 333.62138 158.8462 333.62138 241.5 420.74511 241.5 420.74511 158.8462" fill="#231f20"/> <polygon id="logo-animatable-rhs3" style="visibility:hidden" points="420.745 0 211.428 134.095 288.529 241.5 420.745 241.5 420.745 0" fill="#231f20"/> </svg> and here's my code: gsap.registerPlugin(MorphSVGPlugin, DrawSVGPlugin); [ "#logo-animatable-rhs1", "logo-animatable-rhs2", "logo-animatable-#rhs3" ].forEach((id) => { MorphSVGPlugin.convertToPath(id); }); let totalDur = 6; let lhsProp = 0.85; let lhsDur = lhsProp * totalDur; let rhsDur = totalDur; let tlLeft = gsap.timeline({ defaults: { duration: 0.01 }}); let tlLeft2 = gsap.timeline({ defaults: { duration: lhsDur }}); let tlRight = gsap.timeline({ defaults: { duration: rhsDur/2 }}); tlLeft.to("#logo-animatable-lhs", { opacity: 1 }); tlLeft2.fromTo("#logo-animatable-lhs", { drawSVG: "100% 100%"}, { drawSVG: "87% 100%" }); tlRight .to("#logo-animatable-rhs1", { morphSVG: { shape: "#logo-animatable-rhs2" }, ease: "none" }) .to("#logo-animatable-rhs1", { morphSVG: { shape: "#logo-animatable-rhs3" }}) ; Any help GREATLY APPRECIATED! cheers PS for some reason my screenshot file upload fails (only 90kb)....hmmm....maybe you can reproduce with my svg and code anyway???

awsm - thx heaps!

OMG thank you soooo much! And such a quick response! One quick question: the website is Nuxt-based - any problems getting GSAP + MorphSVG + DrawSVG into nuxt?

Hi there. I am trying to animate a logo for a client's website. It has two simple shapes, a circle segment on the left, and a polygon on the right. They are meant to animate simultaneously. I am happy with the right hand side, but not the left. I am wanting it to look like the circle segment starts from a thin line and opens out like a fan to a quarter circle. If you look at the codepen, the start and end lhs svg elements are as similar as I can make them - they both lean on the "arc" svg draw command. They both start at the same point, draw a line to the same point, start an arc of the same radius at the same point, and then they just differ in their end points for the arc command. Yet when I animate between the two, the animation has this extra point kick in, and their is a weird kind of morphing - subtle, but noticeable. I had thought animating between two circular segments this similar, to open in a fan shape, would be easy. I am wrong! Any help greatly appreciated.