Leaderboard

Lol I was just typing this out: You can snap to different progress values. Check out snap in the do https://gsap.com/docs/v3/Plugins/ScrollTrigger/ as mentioned it snaps to progress values, eg 0 is the start of your ScrollTrigger and 1 is the end. Your total scroll distance is 6000px, so let's say you have 6 images and you want to snap to each one of them 1 / 6 = 0,1666, you you want to snap to increments of 0.1666 Hope it helps and happy tweening!

@mvaneijgen Thanks for the idea, I tried your approach for the animation and seems like it worked :) https://codepen.io/iamruletik/pen/oNOYMoa

This is wonderful!! Thank you so much. I am so grateful that you decided to post a reply even after my "fixed" edit. I meant that I thought I had fixed my code to run even though I didn't like the result ; wrong. It didn't run but I thought someone might still look at the code and you did! I not only learned exactly what I need to know with regards to this important animation in my ITS, but learned a lot about posting a pen. Such a thorough response - you are to commended as well as thanked... Xristi

Hi @Eduard Sergienko welcome to the forum! Instead of the MotionPath plugin, check out our DrawSVG plugin. I've copied your path and gave it the same style as the shape you had before. and instead of a shape following a path this animates the stroke-dashoffset (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset), you could animate this by hand, but that is going to require a lot of debugging and you'll have to fix some browser inconsistancies, which the DrawSVG plugins already solves for you! https://gsap.com/docs/v3/Plugins/DrawSVGPlugin/ I was not completely sure of your setup, so I just kept the bare minimum for it to work. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/wvZomXM?editors=1010