alexb148 Posted October 1, 2020 Share Posted October 1, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 1, 2020 Share Posted October 1, 2020 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? Link to comment Share on other sites More sharing options...
alexb148 Posted October 5, 2020 Author Share Posted October 5, 2020 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. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted October 6, 2020 Share Posted October 6, 2020 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. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted October 6, 2020 Share Posted October 6, 2020 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. 2 Link to comment Share on other sites More sharing options...
alexb148 Posted October 17, 2020 Author Share Posted October 17, 2020 @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! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now