Item follow another down MotionPath with Scrolltrigger

[glenn_pot]

I'd like to have a few (4-5) clickable items floating in space, aligned with a shared svg path, positioned at different intervals along the path and they all move simultaneously 'towards the user' on scroll. I'm able to achieve this using with MotionPath/Scrolltrigger and playing with the z-axis but I could use some direction with aligning the second element to be 'further along' the path, but move at the same speed when the user scrolls. The items should maintain the 'distance' illusion between them as you scroll.

See the Pen LYyRoOG by glenn_pot (@glenn_pot) on CodePen

[OSUblake]

Hi glenn!

 

We're happy to answer an GSAP-specific questions, but we don't have the resources to provide free general consulting.

 

You can specify start and end positions for your motion path, and you can also create your own path. ease is not motionPath property. That goes on the animation.

ease: 'power4.inOut',
motionPath: {
  path: [
    { x: 100, y: 0, z: -1000 },
    { x: 100, y: 0, z: 0 },
    { x: 500, y: 10, z: 1000 },
  ],
  start: 0.25
}

 

2 hours ago, glenn_pot said:

but move at the same speed when the user scrolls

 

That might a little tricky. You have an object moving along a curve in 3d space. User scrolling is linear. The best you can probably do is use an ease of "none".

 

[glenn_pot]

Thanks for the tip @OSUblake, here's where I've landed with it this morning. Getting closer!

The z-axis manipulation proved more manageable in a separate timeline but I'm not sure if that's the most efficient method.

 

See the Pen poPNWQq by glenn_pot (@glenn_pot) on CodePen

[OSUblake]

3 minutes ago, glenn_pot said:

The z-axis manipulation proved more manageable in a separate timeline but I'm not sure if that's the most efficient method.

 

It's fine. There really is no other way to do it if you're going to use an svg path as it doesn't work with z values.

 

[OSUblake]

And if you want the z animation to appear more linear, you can try using the ExpoScaleEase.

https://greensock.com/docs/v3/Eases/ExpoScaleEase