Jump to content
Search Community

Morphing svg paths into each other

Irfanm test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,

 

All I am trying to do is morph one shape (#step0) into (#fullFace0) after a 0.42s delay for 1s and then into (#fullFace0). I've done this before and I'm not sure what I am doing differently causing it to not work.

 

The paths are all siblings with the destination morphs having display:none. I was getting a weird log in the console, but I looked that up and it was because the Morph plugin wasn't being added properly. That is resolved now, but I'm not sure why this morph isn't taking place.

 

Thank you!

See the Pen bvNZBJ by anon (@anon) on CodePen

Link to comment
Share on other sites

Hi @Irfanm :)

 

Welcome to the forum and thanks for being a Club GreenSock member.

 

The main problem is you have multiple paths with an ID of 'step0'. I'm not sure which one you wanted to target (IDs should be unique), but here's a fork of your pen with everything working correctly. I deleted everything from your SVG that wasn't in use to simplify things a bit.

 

See the Pen GxgeMw by PointC (@PointC) on CodePen

 

You could also use a timeline instead of those tweens with delays if you like.

 

When creating a demo, we'd ask that you please not post Club plugin code in the JS panel. You don't need any GSAP related source scripts in there. You can simply add the necessary scripts via the little gear icon in the JS panel. Here's a CodePen with all the CodePen safe Club plugins for use in your demos.

 

See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen

 

Happy tweening.

:)


 

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