graysonm23

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

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

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.

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: https://codesandbox.io/s/fancy-firefly-hgzyj?file=/src/App.tsx 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.