Struggling Beginner - MorphSVG not morphing to the target shape

[froamer]

Hi, I'm new so I guess I am doing something obviously wrong.

 

The CodePen shows a simple animation between two banner shapes, but there are two things not happening as I expected.

 

1) The light blue triangle doesn't end up like the target shape. It looks like it has been flipped horizontally.

 

2) Why doesn't the logo move to the new position?

 

Any help greatly received!

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

[Carl]

Hi and welcome to the GreenSock forums,

 

Thanks for the demo.

The reason the logo doesn't move up is because the morph is only going to morph the paths of the letters. All your letters are in a container <g> that has a y transformation on them. The morph tweens of the letters does not move their parent element.

Just try adding something like this get that <g> to move up:

 

TweenMax.to("#logo-front", 1, {y:43})

 

 

 

For the other shape, try playing with the shapeIndex 

 

TweenMax.to("#home-cast", 1, { morphSVG: {shape:"#amplify-cast", shapeIndex:3 }});

 

See the Pen ybjNPM?editors=1010 by GreenSock (@GreenSock) on CodePen

 

 

Just a tip: In the future it would help to let us know the id of the "light blue triangle" element and which tween is causing the problem.

 

 

 

[froamer]

Wow, thanks for the quick response Carl and for fixing the logo movement.

 

The light blue triangle #home-cast, ends up a different shape to #amplify-cast. It looks flipped horizontally. I've played with the shapeIndex but it doesn't seem to fix the final shape, only how it gets there.

 

Here is a CodePen with all the other elements hidden, why is it flipped?...

 

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

 

[Carl]

Thanks for the reduced demo. Very nice.

 

The reason things seem flipped is because your starting shape has a transform applied to it via an inline style, specifically a negative horizontal scale.

'

 

Remove the code in the red rectangle from your svg and watch what happens. 

Its best to draw your start and end paths exactly how you want them to look and avoid applying transformations like that.

A good technique is to draw the end triangle path exactly how you want it, duplicate it to create a start path and move the points around (or vice versa). 

 

 

[froamer]

Thanks Carl, you're a star!