Migrating a GSAP 2 bezier to GSAP 3 MotionPath

[alexb148 3 Likes (Newbie)]

Hello, I am migrating an old GSAP 2 site to use GSAP 3 instead, but have just discovered that the bezier functionality has been removed and changed to MotionPath instead.

 

My old GSAP 2 code was as follows:

tl.to(element, 5, {
  bezier: {
    type: 'thru',
    values: [
      { left: '-80%', top: '17%' },
      { left: '-79%', top: '17%' },
      { left: '9%', top: '17%' },
      { left: '26%', top: '20%' },
      { left: '38%', top: '34%' },
      { left: '63%', top: '67.5%' },
      { left: '75%', top: '81%' },
      { left: '92%', top: '83%' },
      { left: '100%', top: '83%' },
      { left: '140%', top: '83%' }
    ],
    curviness: 1
  },
  ease: Power0.easeNone
});

I've so far converted this to:

tl.to(element, 5, {
  motionPath: {
    type: 'thru',
    path: [
      { left: '-80%', top: '17%' },
      { left: '-79%', top: '17%' },
      { left: '9%', top: '17%' },
      { left: '26%', top: '20%' },
      { left: '38%', top: '34%' },
      { left: '63%', top: '67.5%' },
      { left: '75%', top: '81%' },
      { left: '92%', top: '83%' },
      { left: '100%', top: '83%' },
      { left: '140%', top: '83%' }
    ],
    curviness: 1
  },
  ease: Power0.easeNone
});

 

But it's not quite working - I think it might be the fact I was previously animating left/top percentages of the element within a responsive container, rather than fixed x or y values.

 

It also seems to initially animate from { left: '0%', top: '0%' } even though I have not added that in.

 

Is there an easy way to make this work with GSAP 3, or will I need to figure out the path values all over again? I know using translations instead of left/top will be better in the long run, but I have quite a few animations to convert!

 

Thanks

[ZachSaucier 6,610 Likes (Superhero)]

Hey Alex. You could write that more in GSAP 3 syntax like so:

tl.to(element, {
  duration: 5, 
  motionPath: {
    path: [
      { left: '-80%', top: '17%' },
      { left: '-79%', top: '17%' },
      { left: '9%', top: '17%' },
      { left: '26%', top: '20%' },
      { left: '38%', top: '34%' },
      { left: '63%', top: '67.5%' },
      { left: '75%', top: '81%' },
      { left: '92%', top: '83%' },
      { left: '100%', top: '83%' },
      { left: '140%', top: '83%' }
    ],
    curviness: 1
  },
  ease: 'none'
});

It seems to work for me. Could you please show an example in v2 that shows your expected outcome vs the GSAP 3 version that doesn't behave how you expect it?

[alexb148 3 Likes (Newbie)]

Hi Zach, thanks, I've done a bit more experimenting but am still having issues. I've created a codepen to illustrate:

 

See the Pen dyXbymq by alexb148 (@alexb148) on CodePen

 

First off, I am animating the red (first) element using percentages (as I was in GSAP 2, and as per your example) but you can see that these percentages are converted to absolute px values instead.

 

Secondly, I have tried using xPercent and yPercent values to animate the green (second) element, but noticed another issue - the path does not seem to treat the path points as I would expect. I have created 10 coordinates, and yPercent is set to 0 for the first 9 - surely the y value shouldn't change at all until the last 10% of the animation, and yet it starts animating immediately. This makes no sense to me whatsoever.

 

Maybe I'm missing something, but as far as I can see MotionPath can't be used to animate top/left values, and does not even respect the path values it is given.

[GreenSock 12,928 Likes (Superhero)]

I do see what you mean, @alexb148, and I'll work on a fix. It'll require a deep-dive which could take some time, so thanks in advance for your patience. Rest assured we'll get it resolved. 

[GreenSock 12,928 Likes (Superhero)]

This should be resolved in the next release which you can preview at https://assets.codepen.io/16327/MotionPathPlugin.min.js

 

Better? 

 

And by the way, you can make the top/left percentage values work in the current version by adding unitX: "%" and unitY: "%" to the motionPath object (undocumented)  But the upcoming release automatically senses that unit in the value of the first object in the Array. 

[alexb148 3 Likes (Newbie)]

@GreenSock that was quick work, thanks! I've had a brief play and it does seem to be doing what I'd expect now 👍 looking forward to the final release!