Jump to content
Search Community

GSAP + MorphSVG - trying to animate circle segment

binarybhu test
Moderator Tag

Recommended Posts

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.

 

See the Pen KKQdpeZ by bhuvidya (@bhuvidya) on CodePen

Link to comment
Share on other sites

Hi @binarybhu :)

 

Welcome to the forum.

 

I think that would be a whole lot easier with DrawSVG rather than a morph since it's a primitive circle.

 

See the Pen 03283c34b0c95fb24f0cfa8c11cfb575 by PointC (@PointC) on CodePen

 

MorphSVG and DrawSVG are perks of Club GreenSock so you'd need a membership to use them in the wild. 

 

Hopefully that helps. Happy tweening and welcome aboard.

:)

 

  • Like 1
Link to comment
Share on other sites

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???

Link to comment
Share on other sites

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.

Screen Shot 2022-05-09 at 9.00.14 pm.png

Link to comment
Share on other sites

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)

 

See the Pen QWQNNaN by bhuvidya (@bhuvidya) on CodePen

 

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!

 

Link to comment
Share on other sites

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

 

 

  • Like 2
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...