Jump to content


  • Posts

  • Joined

  • Last visited

About graysonm23

graysonm23's Achievements

  1. 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.
  2. 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
  3. 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.
  4. 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.