Rotation & switching SVG Paths on scroll direction

[mark_39159]

Hi Everyone,

 

First time here so please bear with me.
I was inspired by an example of what looked like a bike route on a very large map. I have quickly created a map that looks like a UK motorway network and show app screens at key points in the journey. I've pushed this live for the time being here to see the bigger picture. https://nextjunctionapp.com/

 

I'm experiencing a couple of problems which is probably my lack of my understanding. First one is if I use autoRotation: true,  the arrow just resets its to the same position when scrolling in the other direction.

 

Second one  if possible is to add the arrow to another path id on scroll up. The reason for this is that when the arrow is travelling along the path in the opposite direction, it would slip off the motorway junctions on the opposite side too? just like a car would behave. if that makes sense

 

Any pointer would be very warmly welcome  

 

See the Pen MWqWjom by mark-pierce (@mark-pierce) on CodePen

[Cassie]

Hey there!

 

First up let's look at this one
 

Quote

If I use autoRotation: true,  the arrow just resets its to the same position when scrolling in the other direction.

What is your desired behaviour?

[mark_39159]

Hi Cassie,

 

Thank you for your prompt response. So I want the arrow to always face the direction it's heading. could not get the balance with the self.direction on ScrollTrigger and the autoRotate.

[Cassie]

Ah ok, perfect, thanks for the explanation ☺️

If I were you I'd separate out the up/down direction logic and the motion path following logic by creating a container element that tracks and an inner element that switches direction.

See the Pen MWqWvom?editors=1010 by GreenSock (@GreenSock) on CodePen

[mark_39159]

Thats amazing.... never in a million years was I going to work that out!! 

 

Thank you so much.

 

Dare I ask if you know the second piece of the puzzle? switching between paths on scroll direction? Although you can not undo your awesomeness so far

 

[Cassie]

Now that one I'm not sure about. I assume the path would match up in some areas and then divert at a certain point?

It sounds incredibly complicated. How would you know what position you should be on path 'b' when you change direction on path 'a'? The visual placement and the animation 'progress' placement would be different I assume?

I'm not saying it's impossible, I just think it may be beyond the help we can offer here for free.

We do custom consulting so if that's an option for you let us know and we can explore options.

[mark_39159]

Hi Cassie,

 

You're 100% correct with all your questions. The the 2 paths are very similar. Mainly going round roundabouts the correct way and leaving junctions on the return journey.

 

Let me take the idea away and see if the features adds enough value to get funding for consultation. 

Your contribution has been fantastic and I thank you so much for your time and effort today.

 

Have a great rest of your week. Happy coding.