JAcato

Hi @ZachSaucier Thanks a lot! That fixes all It works perfectly. Many thanks for your help and support!

@ZachSaucier Hi Zach! Managed to move a step forward. I've also setup a demo in Codepen, which illustrates the progress thus far. As you can see, moving from point A (where the avatar starts) to C works perfectly. Going from C to B works as well. At that point, going back to A, doesn't work as intended, it uses point B as finish, where as that should be the starting point. I believe this is, because the original path from A to B hasn't been walked yet. So it doesn't know where to start. https://codepen.io/nogzoiets-the-looper/pen/NWNqOyQ

@ZachSaucier Great! That works indeed. Once the player has walked a path, the reverse is working as intended! One note: when the player hasn't walked a certain path yet, and it's called using .progress(1).reverse(), it's playing backwards, but the start and end position are wrong. Let me try and set up a codepen demo illustrating this

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();

That's even smarterer! Thanks!

Hi Zach, Great thanks! I've been looking into https://codepen.io/GreenSock/pen/mdyxvGX as well to find a suitable approach. Back to prototyping!

Hi ZachSaucier, First of all thanks for the welcome and quick reply! Really appreciated! The MotionPathPlugin should be the way to go then. Thanks! I will try to setup a Codepen to have some progress to look at, and see how far I will get. Do you know of an example using a path with multiple directions like mentioned in the OP? Until now, I've been wrestling with the examples shown in

We haven't set up a codepen yet, but included is the visual design created for a web-based game to develop. We found a few examples of GSAP getting actually somewhat close to how it should work, but we find it hard to find a push in the right direction when it comes to intersections in the path below. The marker (avatar on A) should be able to move to points B and C when the player clicks one of those points. From point B, the player should be able to move to C or E From point C, the player should be able to move to B or D or E. Etcetera. Is this actually possible using GSAP with the MorphSVGPlugin and BezierPath?