Jump to content
GreenSock

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

Tween path with same number of points to different shape?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm wondering if it should be possible to tween between two sets of path values with the same number of points. For example, suppose I have an SVG with the following path data:

<path id="n" d="M1.00000015,71.269657 L1.00000015,75.5026892 L0.999999988,98.6925107 L1.00000015,120.019657 C0.999999984,121.276249 0.999999984,123.013553 0.999999898,124.044071 L0.999999984,148.012996 L150.002473,148.012989 C150.553392,148.012989 151,147.561778 151,147.00891 L151,0.462184836 150.555247,0.0126430611 150.009303,0.0126430611 L2.79077147,0.0126430611 L0.999999988,0.0126430611 C0.999999988,1.31665305 0.999999984,22.0117224 0.999999984,22.0117224 C0.999999985,23.3740268 0.999999988,24.5196567 0.999999988,25.5836215 L0.999999988,49.3460918 C0.999999988,49.3460918 1.00000015,70.2861365 1.00000015,71.269657 Z"/>

And with GSAP I do this:

 

var changedShapeID = theSVG.querySelector('#n');
var changedShapePath = "M1.38388602,72.2082603 C0.973032172,73.2106889 0.958561277,74.8587265 1.35575085,75.8776525 L10.6365755,99.6930029 L1.32038928,121.509149 C0.907211953,122.510356 0.89074975,124.158726 1.28793932,125.179275 L10.568764,149.025648 L179.637832,149.013553 C180.189423,149.013514 180.636576,148.56227 180.636576,148.009402 L180.636576,2.01721499 C180.636576,1.46267711 180.179902,1.01313533 179.641046,1.01313533 L10.6365755,1.01313533 C10.5753064,0.379674194 1.38388602,22.8687273 1.38388602,22.8687273 C0.973032172,23.8711559 0.958561277,25.5191935 1.35575085,26.5381195 L10.6365755,50.3465841 L1.38388602,72.2082603 Z";
TweenMax.to(changedShapeID, 0.75, {attr: {'d': changedShapePath}});

I get the shape snapping to the new path shape, rather than tweening to it. As a GSAP beginner I'm unsure whether this is:

 

1. expected behaviour and I need to use another tool alongside GSAP (such as Snap)?

2. an error between keyboard and chair, in that I'm just doing something wrong?

 

Can anyone point me in the right direction?

 

See the Pen dPeLbZ by benfrain (@benfrain) on CodePen

Link to comment
Share on other sites

Hi Benfrain,

 

Welcome to the GreenSock forums. Thanks for posting your question here.

 

Unfortunately we do not have a baked-in solution for tweening SVG path points like you need.

I understand that Snap does handle that quite well: http://jsfiddle.net/rgWLT/1/

 

We are a bit buried in other feature requests and API enhancements, but this is certainly something we intend to add as time allows. 

  • Like 2
Link to comment
Share on other sites

Hi Carl, thanks for the prompt response. 

 

I've now used Snap now to achieve this end but yes, having the capability to do this in GSAP would be great (even if it was a payable plugin) as I am only including Snap at present to carry out this specific task.

 

Looking forward to seeing it in GSAP native at some point in the future. 

  • Like 1
Link to comment
Share on other sites

Yup, the stuff Diaco posted illustrates how  a plugin could work. 

 

If you have just a few of these animations you could also try tweening the progress of a SnapSVG tween.

 

Just this morning Filip Bech shared such a solution on twitter. 

 

Demo: http://codepen.io/filipbech/pen/raKeZq?editors=101

 

Perfect timing;)

 

Big thanks to Filip for sharing this.

 

https://gist.github.com/filipbech/84a5864399111c15619b

  • Like 2
Link to comment
Share on other sites

  • 3 months later...

I just discovered something very interesting about the EndArrayPlugin. If the values at a certain index are the same in both arrays, it won't tween the value, which means the array can contain strings. The only caveat is that the first element must be a number, but that's not too hard to get around.

 

What all this means is that you can split a path string into an array and tween that. Since the plugin is going to ignore strings, you don't need to break your path up into different commands, tween those values, and then rebuild the path string. The only limitations of using this technique are that the number of points and commands must match up, so you can't go from C to c or C to S. You also can't change a flag, like in the arc command where you can specify to use a large arc since that value must be an integer.

 

See the Pen RPKdQz by osublake (@osublake) on CodePen

  • Like 5
Link to comment
Share on other sites

  • 1 month later...

I just discovered something very interesting about the EndArrayPlugin. If the values at a certain index are the same in both arrays, it won't tween the value, which means the array can contain strings. The only caveat is that the first element must be a number, but that's not too hard to get around.

 

What all this means is that you can split a path string into an array and tween that. Since the plugin is going to ignore strings, you don't need to break your path up into different commands, tween those values, and then rebuild the path string. The only limitations of using this technique are that the number of points and commands must match up, so you can't go from C to c or C to S. You also can't change a flag, like in the arc command where you can specify to use a large arc since that value must be an integer.

 

See the Pen RPKdQz by osublake (@osublake) on CodePen

 

I just created an account to commend you on this solution. I've been using GSAP for a while but just started with Snap. I created my animations of polygon points using Snap but before creating functions to loop and start, stop etc (maybe Snap has these built it but I got bored of looking in the docs), I thought I'd see if there's any way to do it with GSAP. The above is working very nicely and allows me to use stop(), play() etc. I'm confident the animations will be more stable across browsers and devices as it's GSAP. Looking forward to the future SVG plugin!

  • Like 4
Link to comment
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.
×