Hello everyone,
I am working on a project where I mix PixiJS and GSAP to animate my canvas' content and I am encountering an issue with the BezierPlugin, more specifically its autoRotate feature.
For some reason it goes crazy when I enable it. The bezier path itself is correctly respected but the Sprite (which is a car in my app) rotates a few times on itself instead of slightly turning to indicate it's following the path.
The way it rotates makes me believe it might be something related to the center of origin but I can't figure out why or how to fix it (I imagine it might also be more related to PixiJS rather than GSAP).
You can have a look at http://haveagoodride.atvea.org/ (I know it's no CodePen, I hope it's not too much of an issue) which is my work in progress for the project. The issue I'm talking about is easily spottable but I'm talking about the vehicle moving along the path after you hit that "Let's go" button.
Here's how my Bezier tween is written:
path = [{x:-200, y:2000}, {x:286, y:1837}, {x:330, y:1725}, {x:330, y:1725}, {x:376, y:1669}, {x:387, y:1589}, {x:326, y:1531}, {x:242, y:1534}, {x:173, y:1519}, {x:140, y:1465}, {x:131, y:1420}, {x:155, y:1381}];
TweenMax.to(vehicle, 5, {bezier:{values:path, autoRotate:true}});
If needed to be looked into a bigger scope, it's in my app.js file, line 182.
What am I missing here? Thanks!