MorphSVG bouncy line during drag

[tailbreezy]

Hello,

 

I am wondering if there is a way to get/extract the current path from morphSVG on a specific progress.

 

e.g

 

morphing from circle to square

progress(0.5) => get the path d="..?.."

 

Is getProperty(target, 'd') the only and proper way to achieve this extraction?

See the Pen MWjxLma?editors=1011 by dadacoded (@dadacoded) on CodePen

[ZachSaucier]

13 minutes ago, tailbreezy said:

Is getProperty(target, 'd') the only and proper way to achieve this extraction?

There are different methods of accessing the attribute, but yes, the only way to get the value is to access the attribute. Why do you ask?

[tailbreezy]

I will whip up a codepen  just a sec

[tailbreezy]

Basically I want to play from current path to this.y in Draggable.

The thing is want to play an tween instead of setting values, because I want to add eases and such.

 

It would be like mapping mapRange("M 0,0 H 280 C 280,0 280,72...", "M 0,0 H 280 C 380,0 380,72...",0,1) 

and then use the result in morphSVG.

[ZachSaucier]

Sorry, I'm still not understanding your end goal. Can you please try to explain the goal more clearly?

[tailbreezy]

Basically, I want to have an elastic effect applied on every drag.

The only way I can see this working is to have different 'from' and 'to' each time the dragging happens (or at least a different "to")

 

(updated the demo)

[ZachSaucier]

14 minutes ago, tailbreezy said:

an elastic effect applied on every drag

So your demo is done now? Or you're trying to do something else as well?

[tailbreezy]

No, not really this is where I have actually started before I decided to add ease. I will probably rest on it a little, and give it another take later.

[tailbreezy]

Managed to pull it off, not sure why it is not playing correctly here.

You can get an idea from the code.

 

Codepen Chrome throws some weird exception. It plays proper on firefox (at least here)

 

Is there any other way to achieve this? Cleaner perhaps and without codepen issues

[ZachSaucier]

In the future, please make sure to use the "fork" button on CodePen when creating new versions of demos for these forums. That way context is not lost  

 

2 hours ago, tailbreezy said:

Chrome throws some weird exception

I think you found a bug. We'll continue investigating. In the mean time you can use the vanilla JS version: 

paths.current = document.querySelector('.fromRef').getAttribute('d')

 

2 hours ago, tailbreezy said:

Is there any other way to achieve this?

Well, the difficulty is that you want it to both be controlled by the drag position and animate once the drag has been completed. So the closer your value is during the drag, the less bouncy you can get when the drag is done. If you removed the actual drag aspect and just animated with an elastic ease to the final state from the beginning state it'd be much more bouncy. See what I mean?

 

If you just limited the updates of your morph to just the times when it snaps it'd be significantly better but still not super bouncy:

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

 

Additionally, if you wanted to have the circle/drag element itself be smooth and only the bouncy-ness snap you could do that by not using liveSnap but instead do the snappping inside of the onDrag function (when setting the new progress).

[GreenSock]

2 hours ago, ZachSaucier said:

I think you found a bug. We'll continue investigating. In the mean time you can use the vanilla JS version: 

It's actually not a bug. gsap.getProperty() is primarily for CSS properties or normal (direct) properties of object, not attributes but it does fall back to attributes when nothing is found. The issue is simply that Chrome reports the getComputedStyle() with "path(...)" wrapped around the value. Like Zach said, if you want to get the attribute, it's best to just do element.getAttribute(...).

 

Here's an approach that's simpler in some ways, but more advanced in others: 

See the Pen poEBzaJ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

It's more performant because it's simply animating the progress of a single tween that's doing the interpolation. I crafted an elastic ease out that has a very slight ease in at the beginning to smooth things out, and then I created a special ease that goes from -1 to 2 instead of 0 to 1 so that we have room to overshoot the values with elastic and not get clipped. Seems to work relatively well. 

 

Happy tweening!

[tailbreezy]

Thank you. Both answers are great. Also appreciate you guiding me thru the thrown exception.