Help with ScrollTrigger and MotionPath ?

[Rafik Outside]

Hello there I am new to gsap I am researching for a website I have a section with 4 rows of alternating image  and content    and  I am trying to slide image in a svg path while scrolling to the end of svg. I having problem align the items with original position  image in section with svg as I can't find the percentage of offset of the image in the svg path according to height of original image. Can somebody please help me solve this problem.

 

See the Pen OPJqVMg by rafik-outside (@rafik-outside) on CodePen.

[Rodrigo]

Hi,

 

Using the anchorsToProgress helper function you can achieve that:

https://gsap.com/docs/v3/HelperFunctions/helpers/anchorsToProgress/

 

Here is a fork of your demo:

See the Pen YPzgQzr by GreenSock (@GreenSock) on CodePen.

 

The only issue is that the anchors in the path doesn't seem to match with the tangent points of your curve, so you should have a look at your SVG path and correct that.

 

Hopefully this helps

Happy Tweening!

[Rafik Outside]

@Rodrigo Thank you for the help. I really appreciate it