Jump to content
Search Community

Morph points are going in the wrong direction

ryanroehl@gmail.com test
Moderator Tag

Go to solution Solved by PointC,

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

I am using the morph function to tween from 4 SVG paths to 4 other SVG paths to mimic a vault door shutting.


All the paths are morphing in the right way, except for one path. The #doorfront to #doorfront2 paths are morphing in the wrong direction. Can anyone give me a hand?





bonus help points :P


I need to have the mouse off to open the door back up. I can figure this one out though..... if someone could just help me with the door morphing issue that would be great!




See the Pen qREbPo by ryanroehl (@ryanroehl) on CodePen

Link to comment
Share on other sites

  • Solution

HI ryanroehl@gmail.com :)


Welcome to the GreenSock forums.


I think you may need to reverse the points of your path to get the desired behavior. If you used AI, it's a pretty simple matter. I posted about it here:




For a reverse on hover out, you can move the timeline out of your hover() function and play/reverse on hover over/out. Like this:

var tl = new TimelineLite({paused:true, reversed:true});

tl.to($('#circlesmall'), 1, {morphSVG:"#circlesmall2"})
tl.to($('#circlebig'), 1, {morphSVG:"#circlebig2"}, "-=1")
tl.to($('#doorside'), 1, {morphSVG:"#doorside2"}, "-=1")
tl.to($('#doorfront'), 1, {morphSVG:"#doorfront2"}, "-=1");

        function() {tl.play();},
        function() {tl.reverse();}
Hopefully that helps.
Happy tweening.
  • Like 3
Link to comment
Share on other sites

Thanks for your help PointC!


changing the order of the points does indeed work. And that code for reversing the timeline is perfect as well. 


I was able to change the direction of the points for a different icon that I was working on, and that did indeed fix the problem. But when I bring the door into illustrator it wont let me reverse the path after making it into a compound path...

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