Morph points are going in the wrong direction

[[email protected]]

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?

 

Thanks!

 

 

bonus help points

 

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!

 

 

Thanks!!!

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

[PointC]

HI [email protected] 

 

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:

 

https://greensock.com/forums/topic/13681-svg-gotchas/?p=57409

 

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");

$('#background').hover(
        function() {tl.play();},
        function() {tl.reverse();}
)

 

Hopefully that helps.

 

Happy tweening.

[[email protected]]

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