Morphing Card

[Dennyno]

Hi all, I was testing this card animation, while clicking on the ➕ button on my code, the svg should morph and translate to top as the video, following the card transition.

Even is still a work in progress, I cant make it work properly.

What am I missing?

Any hint here please?

See the Pen LYdNmXX by DedaloD (@DedaloD) on CodePen

[Cassie]

Hey there Denny!

 

It's probably worth minifying that demo down even more so that it's *just* the shape and the morph for us to look at - then we can help you get that right before adding it in to the final card.

 

[Dennyno]

36 minutes ago, Cassie said:

Hey there Denny!

 

It's probably worth minifying that demo down even more so that it's *just* the shape and the morph for us to look at - then we can help you get that right before adding it in to the final card.

 

Hi @Cassie 
thanks for replying, gsap code is at bottom, I guess it's 5 or 6 lines of the gsap related code, while other stuff it just for the appeal of the card.

Basically what Im trying to achieve is just: click here, morph and translate to top, while actually the morphing is buggy and plays when it wants to. 

One day, or another I must go for @Carl lessons about svg animations  

 

[GreenSock]

Yep, I'd highly recommend @Carl's course. You'll learn a lot. 

 

You had some very strange code...

attr: {
  d:
  "M0,0c0,0,42,0,104.5,0c112.3,0,134.5,0,169,0c53.3,0,103,0,103,0v362.5H0V0z",
  d:
    "M0,9.5c0,0,44.8-22.6,104.1,2c102.7,42.6,141.5,70.8,175.7,71.3c48.3,0.7,96.7-55.3,96.7-55.3v84H0V9.5z"
}

Two of the same properties names??

 

And there was a .reverse(), in the middle which looked odd. 

 

You're trying to do a regular attr:{d:"...."} tween for morphing but that will ONLY work properly if you have exactly the same number of points and the same order/formatting of the svg path commands. It's much safer and easier to just use MorphSVGPlugin because that'll do all the work to subdivide paths to make the number of points match and path commands. 

 

I unpaused the timeline and switched to MorphSVG here:

See the Pen bGvpQOZ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I don't have time to adjust your file to look like your video, but hopefully this will get you on your way. These forums are really for GSAP-specific questions rather than "here's a video, please make my project match it" but we're happy to offer advice when we can without spending too much time. 

 

Enjoy!

[Dennyno]

On 7/9/2022 at 11:19 AM, GreenSock said:

Yep, I'd highly recommend @Carl's course. You'll learn a lot. 

 

You had some very strange code...

attr: {
  d:
  "M0,0c0,0,42,0,104.5,0c112.3,0,134.5,0,169,0c53.3,0,103,0,103,0v362.5H0V0z",
  d:
    "M0,9.5c0,0,44.8-22.6,104.1,2c102.7,42.6,141.5,70.8,175.7,71.3c48.3,0.7,96.7-55.3,96.7-55.3v84H0V9.5z"
}

Two of the same properties names??

 

And there was a .reverse(), in the middle which looked odd. 

 

You're trying to do a regular attr:{d:"...."} tween for morphing but that will ONLY work properly if you have exactly the same number of points and the same order/formatting of the svg path commands. It's much safer and easier to just use MorphSVGPlugin because that'll do all the work to subdivide paths to make the number of points match and path commands. 

 

I unpaused the timeline and switched to MorphSVG here:

 

 

 

I don't have time to adjust your file to look like your video, but hopefully this will get you on your way. These forums are really for GSAP-specific questions rather than "here's a video, please make my project match it" but we're happy to offer advice when we can without spending too much time. 

 

Enjoy!

Very belated, but thanks