[Game World Roadmap Follow Path on Click]

Hi @ZachSaucier

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

[Game World Roadmap Follow Path on Click]

@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.

 

See the Pen NWNqOyQ by nogzoiets-the-looper (@nogzoiets-the-looper) on CodePen

 

[Game World Roadmap Follow Path on Click]

@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

 

 

[Game World Roadmap Follow Path on Click]

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

 

 

[Game World Roadmap Follow Path on Click]

That's even smarterer! Thanks!

[Game World Roadmap Follow Path on Click]

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!

[Game World Roadmap Follow Path on Click]

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 

 

[Game World Roadmap Follow Path on Click]

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?