MotionPath + ScrollTrigger with Horizontal Scroll

[sharaku17]

Hallo all, 

 

I have been trying to implement a page where the user can scroll normally through a first section, then when reaching the second section I use ScrollTrigger to 

Pin the second section and move the second Section in the x-axis to create a horizontal scrolling effect, after reaching the end of the x-axis scroll, the user should keep scrolling normally vertically again into the third Section. 

 

The clue is that, inside the second section I have a svg path (The Svg Path is bigger than the viewport both in X-axis aswell as Y-axis) with a circle where the circle follows the svg Path, but I have no idea how to control the speed of how the circle Moves along the Path.

 

The circle reached the end of path, way before I reach the bottom of the second sections y-axis.

 

My end-goal would be to have the user reach the second section, than start the horizontal scroll, the circle reach the furthest point of the path on the x-axis, than at the end of the horizontal scroll, scroll vertically until reaching the end of the second Section, and the circle then to finish at the end of the Path. 

 

 

Hope I could somehow explain my problem, but I guess code is always better so

here is a simplified codepen: 

 

Thanks in advance!

See the Pen GRLQpNb by Danilo-T (@Danilo-T) on CodePen

[sharaku17]

Ok I got it! 

 

Was missing an ease: "none" on the circle, its working now