extrapolate paths & clamp

[tailbreezy]

Hello,

 

Yesterday I was playing with morphSVGs and wanted to get the morph path data at a certain progress.

 

Today, I am wondering what options are available in GSAP for extrapolating a path beyond the clamp values (e.g the actual path data).

 

As you can see from the example the dragging causes the dragged element to extrapolate beyond the actual paths used.

If you drag slowly it stays within bounds, but if you drag quickly you get extrapolated paths. Which what I am after.

 

How can you get such a result in GSAP?

 

See the Pen mdrgwLb by dadacoded (@dadacoded) on CodePen

[tailbreezy]

 

The aim is to extrapolate the "svg path d" that the morph is using.

The shape here is simple, and this effect is a piece of cake to do with scales here. So this is just for illustration purposes.

[ZachSaucier]

Hey tailbreezy. I think it would be helpful if you explained a bit about the logic of what ReactSpring is doing in this case as the syntax is not the most straightforward to me at least.

[tailbreezy]

Hey Zach,

 

That is a great question. Now that you mention it I have checked the path d in the DOM and it is not overextending in either direction. Seems like there is no extrapolation happening and it is closely related to my question yesterday, in which Jack showed me an example of applying custom ease curve to appear overly elastic.

 

As for React and ReactSpring, I just gleaned a bit to get a hold of the basic ideas, unfortunately reading typescript syntax makes my head hurt and I cannot easily understand the source code. I love the feel of react-spring animations though so I am trying to bridge my knowledge gap.