Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
sdad2

Is this possible? (new here)

Recommended Posts

I need an algorithm to convert one path  <path d="x y z..."  to another <path d="a b c d e... " at a given point in time. 

Tweening would be a nice to have that I can live without.

Can this library do that?

 

Link to post
Share on other sites

Hi and welcome to the GreenSock forums.

 

Sorry but your question is a little bit vague. What I can infer from the little information you're providing, perhaps the MorphSVG Plugin is what you're after:

 

Check out the samples in there and the docs to see how it works:

https://greensock.com/docs/v3/Plugins/MorphSVGPlugin

 

This is a Club GreenSock benefit, but if you want to take it for a test drive, you can use this codepen in order to play around with it:

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Happy Tweening!!!

  • Like 5
Link to post
Share on other sites

What I am asking for is if I can do this:

I want a function that given the inputs of an existing path, end state, duration, and current point in time, (and optionally a tween); will output the path at the stated time.

Assuming:
// start <path d="0 0 L 50 50"  id="path1"
// end   <path d="0 0 L 100 100"

If the animation takes 2 seconds 
  at the end of second 2 I would get "0 0 L 100 100",
  at the end of second 1 I would get "0 0 L 75 75"
  at the end of second 0.001 I might get "0 0 L 51 51"

What I want is a function that will input: the total number of seconds to take, the end state,  the current time, [Optional tween]

So perhaps: 
var someObj = new SomeGreenSockObject("#path1")
someObj.getPathAtTime( "0 0 L 100 100", 1, 2 ) //returns a string "0 0 L 75 75"

someObj.getPathAtTime( "0 0 L 100 100", 2, 2 ) //returns a string "0 0 L 100 100"

someObj.getPathAtTime( "0 0 L 100 100", 0.001, 2 ) //returns a string "0 0 L 51 51"

I do not want an animation nor a change to the path, I want the output of the path's string

 

Link to post
Share on other sites

If you're using exactly the same number of points and string pattern, the gsap.utils.interpolate() should work great.

let pathInterp = gsap.utils.interpolate("M0 0 L 50 50", "M0 0 L 100 100");

console.log(pathInterp(0.5)); //M0 0 L 75 75

If you need to accommodate a different number of points, you'll have to use MorphSVGPlugin to do its magic. Let us know if you need any help with that. You could just use a paused tween and then set the progress() or time() to whatever value you want to have it alter the value accordingly, and then just read it. Creating a function for that should be easy too - just let us know if you need that. 

  • Like 5
Link to post
Share on other sites

Thank you that should work. I will give it a try

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×