MorphSVG changes values

[IndM]

Hi all!

I'm trying to recreate the svg transition from the menu on this site: https://mfisher.com/ .

I'm not getting the same results even with the same svg being used. I've tried using the morphSVG plugin but I notice it changes the part 'M0 0 L1708 0 L1708' of the path. While on the site from mfisher, I see that the value remains the same except the values that need to be changed.

Is there a better way to fix this?

See the Pen oNOvzEj by indy-meermans (@indy-meermans) on CodePen

[mvaneijgen]

I've loaded your path in this SVG tool to see what is going on https://yqnn.github.io/svg-path-editor/#P=M_0_0_L_1708_0_L_1708_1330_Q_830_633_0_1330_Z

 

And when manipulating the path and comparing to the other path it was easy to see what values where changing. I don't know how the path is build, that is really important when working with MophSVG so I couldn't tell you what is going wrong.

 

I've used the attr object and target the d attribute directly.

 

When working with SVG masks via clip-path (maybe also other methods) the SVG is as big as it is and it can not conform to the element you're loading it on. I've written a guide which walks you to several solutions and workflows. Hope it helps and happy tweening! 

 

 

 

See the Pen rNbBmwO?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[IndM]

14 hours ago, mvaneijgen said:

I've loaded your path in this SVG tool to see what is going on https://yqnn.github.io/svg-path-editor/#P=M_0_0_L_1708_0_L_1708_1330_Q_830_633_0_1330_Z

 

And when manipulating the path and comparing to the other path it was easy to see what values where changing. I don't know how the path is build, that is really important when working with MophSVG so I couldn't tell you what is going wrong.

 

I've used the attr object and target the d attribute directly.

 

When working with SVG masks via clip-path (maybe also other methods) the SVG is as big as it is and it can not conform to the element you're loading it on. I've written a guide which walks you to several solutions and workflows. Hope it helps and happy tweening! 

 

 

 

 

 

Hi @mvaneijgen! Mercie voor de oplossing!

The width of the svgmask can be manipulated with js adjusting the viewbox and the "L" values in the path depending on the width. Thats what I've noticed when analysing the site I've mentioned.

However, If you have the time and willing to check. You can quickly search the svg in the inspector searching for the "#menuMask" id if you want to check it out. As far as I know, the path is being manipulated by specific values, but some have a sort of delay on them. Is this possible with gsap to add a delay to a number in the path?

for example  
 

d="
          M0 0
          L1538 0
          L1538 0
          Q769 435
          0 0
          Z
        "

the 435 here is the rounded part and is being much faster going to its target (what is 1330) than the 0 after the last "L1538" and the last 0 in that path.

I've created a new codepen that looks at the screenwindow.

See the Pen MWRgBop by indy-meermans (@indy-meermans) on CodePen

 

[IndM]

@mvaneijgen Should i create new toppic for this?

[mvaneijgen]

Nope staying in the same topic is best. I just didn't have the time yet to look at it. 

[mvaneijgen]

I know there is a great post some where on the forum talking about how to "animate individual SVG points",  "SVG nodes", "path points" , but I can find it right now. 

 

I've found this one from the legendary @Carl, but that is an oldy. The logic should still apply. 

 

 

But the logic is create a tween that updates numbers and combine that in to a path then feed that result to a tween that updates the path. I'm going to mark the topic, so maybe someone with some more SVG skills will take a look at the post at a later time. 

[IndM]

@mvaneijgen I've searched aswel on this topic but I still don't know if this able with gsap.
I can perhaps create this custom without gsap by looping the values till it reaches its end value. Speed up the value of the middle part with a certain factor till it reaches its end value what is in this case its screenHeight. 

The reason i want this made with gsap is the use of the timeline, so i can trigger other events when that SVG reached its endpoint or something

[mvaneijgen]

I've managed to make this now. The full animation is two tweens with no easing in the first tween the arc point gets played to 75% of its total value and then the second tween moves it the rest of the way. The easing is set to none, so that it is just a linear movement. Then we control those tweens with another timeline, so that we can ease the full length of the timeline we've created. 

 

I've got this logic from @Carl awesome tutorials. 

 

 

You'll want to create another set of tweens that animates this in reverse and then make the point lag behind, you might want to look in to this tutorial again from @Carl, even beter maybe you just want o sign up for his course, which I would highly recommend!

 

 

Here is the full moving in animation now. Hoop dat het helpt en veel geluk met je project. 

 

See the Pen NWmKOZZ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

couldn't help myself 

See the Pen poBzQJg?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[IndM]

@mvaneijgen Amai I still have a lot to learn! I once checked those videos but never thought this could be the fix. I might have to check these again.   Thanks for cracking your brain on this one 

[mvaneijgen]

Cool! Yep that's the great thing about @Carl's teaching it doesn't matter what he is building, but the logic you can gleam from it is important to add to your own projects. 

 

A week a go I made a post that also might help in your journey. At least it helps me to stop getting stuck and always create a path forward. Nogmaals  veel geluk met je project!

 

 

[PointC]

10 hours ago, mvaneijgen said:

I know there is a great post some where on the forum talking about how to "animate individual SVG points",  "SVG nodes", "path points" , but I can find it right now. 

Is this the one you meant?

 

[mvaneijgen]

@PointC great resource! Definitely for this effect, but alas. The example I was looking for was a line animation where separate tweens were animating their own respective point, so two points on a line had their own independent animations.

[PointC]

hmmm... the only other ones that come to mind off the top of my head are these: