So I created a plane following a quad bezier , i thought switching point 1 and point 3 would invert the bezier direction but it does not.
<script>
$("#remote-vacationicon").on("click",MovePlaneLeft);
$("#remote-houseicon").on("click",MovePlaneRight);
function MovePlaneLeft() {
MovePlane("left");
}
function MovePlaneRight() {
MovePlane("right");
}
function MovePlane(direction) {
console.log("MovePlane " + direction);
var house = $("#remote-houseicon");
var vacation = $("#remote-vacationicon");
var hp = house.position();
var vp = vacation.position();
var midpointx = Math.abs(hp.left - vp.left);
var midpointy = Math.abs(hp.top - vp.left);
if ("right") {
TweenMax.to(document.getElementById("remote-plane"), 5, { bezier: { type: "quadratic", curviness: 1, values: [{ x: vp.left, y: vp.top, scaleX: 0, scaleY: 0 }, { x: midpointx, y: midpointy, scaleX: 1, scaleY: 1 }, { x: hp.left, y: hp.top, scaleX: 0, scaleY: 0 }], autoRotate: true }, ease: Power1.easeInOut });
}
if ("left") {
TweenMax.to(document.getElementById("remote-plane"), 5, { bezier: { type: "quadratic", curviness: 1, values: [{ x: hp.left, y: hp.top, scaleX: 0, scaleY: 0 }, { x: midpointx, y: midpointy, scaleX: 1, scaleY: 1 }, { x: vp.left, y: vp.top, scaleX: 0, scaleY: 0 }], autoRotate: true }, ease: Power1.easeInOut });
}
}
</script>
this is a dynamic sprite of a plane and uses the house icon and vacation icon to build the path , the one control point is just the average of these points. Anyway no matter if i call this function for right or left ,the plane always moves from right to left- like in the "left" defined tween. the "right" tween just switches the insertion of the anchors points.. im a nood to GSAP so sorry for any misunderstandings.
