Hi Zach,
I managed to get it all working, except.. reverse() is not working somehow. Do you have an idea why?
// for each path we generate a tween
// d is the "d" attribute,
// id is the "id" attribute, eg. "path-a-b": path from a to b
// we check if "a: {b: {...}}" exists
// and we check if "b: {a: {...}}" exists
// then we add the tween to both properties
const anim = gsap.to('#avatar', {
motionPath: {
path: d,
align: id,
alignOrigin: [0.5, 0.5],
},
transformOrigin: '50% 50%',
duration: 1,
ease: 'power1.inOut',
paused: true,
onComplete: () => {
console.group('Tween complete');
console.log('Instance: ', instance);
console.groupEnd();
},
});
// on click on a marker
// we grab the id, eg. "em-b", so we know where we have to go (point b)
// then we take the current location, eg. "a", find the corresponding animation (a to b)
// and according to the set "dir", we determine to either play or reverse the animation
// eg. currentLocation is "a", marker is "em-b", so we look for "a: {b:{...}}"
// dir === 1, so play() it is. this works :)
// eg. currentLocation is "b", marker is "em-a", so we look for "b: {a:{...}}"
// dir === -1, so reverse() it is. this doesn't work :)
obj.dir === 1 ? obj.anim.play() : obj.anim.reverse();