Jump to content
GreenSock

graysonm23

Issues with GSAP auto height and MorphSVGPlugin

Go to solution Solved by GreenSock,

Recommended Posts

Hi,
I've been working on getting a sample component using, gsap and gsap-trial codesandbox node module. I've been running into a few issues. 

Here’s the link to the Sandbox: 

 
The issues:
- When using a 3rd party library for icons some of the icons have different amount of paths, I am unable to correctly morph the SVG. The icons as you can see in the Sandbox, the credit card has 1 path, the check mark circle has 2 paths.. and the error message I’m getting is.. “Cannot morph a <SVG> element. Use MorphSVGPlugin.convertToPath()…”
 
Attempting to resolve this issue I tried to, assuming the selectors work like jQuery selectors, target the path element, but was unable to do so. 
 
My question: is there anyway I’m able to efficiently use a 3rd party library in order to MorphSVG’s without too much developer work of merging paths manually or copying the 3rd party component and turning it into one of our own?
 
- Second issue, I know this might be a long shot however I would like to animate the height whenever the content of the box changes, without having to set an explicitly height.
Link to comment
Share on other sites

To be able to animate an auto height element. I was successfully able to do so using the Flip plugin. The CodeSandbox should be updated to reflect the changes.

The code used for reference:
 

const state = Flip.getState(".card");

Flip.from(state, {
    absolute: true, // uses position: absolute during the flip to work around flexbox challenges
    duration: 0.5, 
    ease: "power1.inOut"
    // you can use any other tweening properties here too, like onComplete, onUpdate, delay, etc. 
  });

Which can also be found here

Still unable to use a 3rd party library for SVG's and animate those accordingly, when the SVG's have different number of paths.

Link to comment
Share on other sites

  • Solution
3 minutes ago, graysonm23 said:

Still unable to use a 3rd party library for SVG's and animate those accordingly, when the SVG's have different number of paths.

Right, MorphSVG animates an individual <path>, not an entire <svg> with arbitrary numbers of paths.

 

Your demo seems to work fine if you target the path correctly: 

gsap.to(".payment-modal-cc-icon path", {
  duration: 0.5,
  morphSVG: ".payment-modal-cc-complete-icon path"
});

Or am I missing something? 

Link to comment
Share on other sites

5 minutes ago, GreenSock said:

Right, MorphSVG animates an individual <path>, not an entire <svg> with arbitrary numbers of paths.

 

Your demo seems to work fine if you target the path correctly: 

gsap.to(".payment-modal-cc-icon path", {
  duration: 0.5,
  morphSVG: ".payment-modal-cc-complete-icon path"
});

Or am I missing something? 

I am able to get it working. It does remove the circle around the icon though. I know this can be fixed with a little javascript combining the paths based on which SVG has the lowest amount of paths initially.

The blocker for getting it to show on CodeSandbox, is whenever I try to edit this path `

".payment-modal-cc-icon path"

`
and it gives a path that doesn't exist.. a memory leak starts to happen which causes CodeSandbox to crash

Link to comment
Share on other sites

  • graysonm23 changed the title to Issues with GSAP auto height and MorphSVGPlugin
9 hours ago, graysonm23 said:

It does remove the circle around the icon though. I know this can be fixed with a little javascript combining the paths based on which SVG has the lowest amount of paths initially.

Yeah, you'd need to combine those paths or (in my opinion a better animation might be:) use a stroked path as the circle and use drawSVG to actually draw that circle as it's morphing. In other words, exclude that part from the morph, and draw it on instead. 

 

Asset prep is key in effective morphing. 

 

9 hours ago, graysonm23 said:

The blocker for getting it to show on CodeSandbox, is whenever I try to edit this path `

".payment-modal-cc-icon path"

`
and it gives a path that doesn't exist.. a memory leak starts to happen which causes CodeSandbox to crash

I don't quite follow what you mean by "edit this path". Are you saying you think there's an issue with GSAP causing a memory leak or were you just venting about a possible glitch in CodeSandbox itself? 

 

Let us know if there's anything GSAP-specific you still need help with (we can't assist with CodeSandbox issues). :)

Link to comment
Share on other sites

15 hours ago, GreenSock said:

I don't quite follow what you mean by "edit this path". Are you saying you think there's an issue with GSAP causing a memory leak or were you just venting about a possible glitch in CodeSandbox itself? 

 

Let us know if there's anything GSAP-specific you still need help with (we can't assist with CodeSandbox issues). :)

It seemed to be an issue with GSAP. However, I'm unable to recreate it. If I am able to, I will add a screenshot to it.

 

 

15 hours ago, GreenSock said:

Yeah, you'd need to combine those paths or (in my opinion a better animation might be:) use a stroked path as the circle and use drawSVG to actually draw that circle as it's morphing. In other words, exclude that part from the morph, and draw it on instead. 

 

Asset prep is key in effective morphing. 

Thanks for the tip. That could serve as an asset in the future. I'm learning more about asset prepping with GSAP. Thanks again, for this great tool.

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