MotionPath along the page with ScrollTrigger

[dzestis94]

Hi community!

So for couple of days I'm trying to find a way how to get it work 

So I have a path which I created with MotionPath helper. Which starts from second section.

I'm stuck now for a while and I can't find a way how to track the ball in the center of the screen. Because now on some sections it moves too fast and it disappears from viewport.  Ideally I would like to stop the ball before footer, that means always on last section.

Also it's not responsive either. On my big screen it's fine, but on my iMac mini pro, the ball leaves the path....  About mobile I don't even have what to say

I would be appreciated for any help or ideas! 

See the Pen MWGxqdv by dzestis94 (@dzestis94) on CodePen

[Cassie]

Hey there!

 

So your SVG itself isn't really set up correctly. You've got your path outside of your artboard. (left)

 

You'll need to have a path that's set up inside the SVG viewport as a first step.

 

Here's some adjusted code

 

<svg height="100%" viewBox="0 0 6178 12774">
    <path class="fuse" fill="none" stroke="#000" stroke-width="26.89px" d="M37.449,107.608c326.368,26.128 2171.15,216.897 2249.67,246.649c33.545,12.667 2868.92,294.053 3261.19,709.562c202.725,214.734 544.851,755.884 514.338,1134.69c-41.22,511.34 -2112.98,887.639 -2128.38,1311.95c-13.49,371.736 1114.7,939.153 1080.58,1340.58c-30.756,361.245 -2412.32,623.078 -2221.47,1456.17c267.088,1165.89 2466.4,1030.83 2972.52,1471.49c552.626,481.152 -533.769,1654.86 -1018.51,2407.93c-270.104,419.541 -2479.2,901.807 -2733.2,1251.55c-628.999,865.654 544.397,1360.92 565.172,1360.92"/>
</svg>

If you want to set a width and a height on your SVG and have it scale you'll need to look into preserveAspectRatio

@Carl's been digging into it recently over here
 

In terms of always keeping the circle in the center of the viewPort, that's going to be hard, I'm not going to sugar coat it.

Here's an example

See the Pen WNpwrEx by osublake (@osublake) on CodePen

And a thread.
 

Good luck.

Tip - Just start off without any animation and focus on your SVG layout first.