Shrug ¯\_(ツ)_/¯

You’re trying to repurpose a specific setup found and derived from this thread. https://gsap.com/community/forums/topic/26922-missing-something-w-horizontal-scrolltrigger-%3F/ Which became this tutorial https://css-tricks.com/going-meta-gsap-the-quest-for-perfect-infinite-scrolling/ As you can see from that thread discussion and tutorial there is specific logic involved. Maybe it would be easier for you to instead start from scratch and build the HTML/CSS setup and JS logic you desire. You could also use a regular JS carousel like Flickity, Swiper, Splide, Glide, etc., and save yourself the work.

Desired spacing is subjective, but you could try something basic like this. // * 2 ¯\_(ツ)_/¯ { xPercent: 350 * 2 }, { xPercent: -350 * 2, duration: 1, ease: "none", immediateRender: false }, ¯\_(ツ)_/¯ Worth a try though. 😂 Nevermind that yeilds the same as this: const spacing = .2 But if you can't tweak it within your liking then more complicated general logic is required as @Rodrigo mentioned.

This thread might prove useful also.

You don't need to use the pathEase approach with the example Rodrigo gave. Switch to using solely that approach instead and start fresh since the scope of your requirements have since changed/expanded.

Have a look at the following demo with the pathEase "helper function" for drawSVG. https://codepen.io/GreenSock/pen/vYMdMZN For your Codepen, it would be the following. let scrollMainPath = gsap.from(".theLine", { drawSVG: "0%", ease: pathEase(".theLine", {smooth: true}), duration: 1, scrollTrigger: { trigger: "#svg-stage", start: "top 50%", end: "bottom 50%", scrub: 1 } });

Welcome to the forum @theGeek , The examples found in the following thread might also be helpful to you.

Nice job @mvaneijgen, The following may offer a less fuzzy understanding of the transform / coordinate system change when using objectBoundingBox. https://www.w3.org/TR/SVG/coords.html#ObjectBoundingBoxUnits This converter should also be useful at times for deriving the needed [0,1] coordinates when using objectBoundingBox. Instead of squinting to design 1x1 artwork ? ?. https://yoksel.github.io/relative-clip-path/ Transform can also be used within SVG on 'appropriate items' when using objectBoundingBox and [0,1] coordinates. Utilizing the following basic math: Formula: 1 / Width 1 / Height Example / Output: 1 / 550 = 0.001818181818182 1 / 325 = 0.003076923076923 Then use appropriately in SVG: transform="scale(0.001818181818182, 0.003076923076923)”

Is this a GSAP question ? I don’t spot any GSAP logic being used in your CodePen and the main.js on your live site is also using the same code as your CodePen ? Once the image resources load it appears smooth to me though.

Welcome to the forum @anisos, that example is more of a WebGL, Shaders and complex logic question than it is about GSAP. Of course GSAP can animate anything on the web that it has access to. Here is one such example using GSAP where you can see the overall complexities of such an effect. https://codepen.io/RobinNavas/pen/KKNZLVZ Another simpler option would be using multiple Masks or Clip Paths (either SVG or CSS) for a less elaborate effect like the next example again using GSAP. https://codepen.io/theseventh/pen/yLYLjpg Besides the GSAP Core, you can leverage ScrollTrigger and Draggable, etc., which all work and sync up perfectly to the GSAP Core for even more fabulous possibilities. All these methods can be researched and discovered here on the forum, through the documentation and across the web in places like Youtube, CodePen and Codrops. In general custom sliders, carousels, galleries all require complex JavaScript logic beyond the scope or intention of this forum. Effects such as the link you shared introduce further complexities and required knowledge, so libraries like Three.js, Pixi.js, WebGL libraries, Shader sites, etc., can greatly assist you in conjunction with GSAP. Happy animating with GSAP regardless of what overall approach you decide to take. Good luck with your project. ?

Welcome to the forum @ManishDev18, In addition to @mvaneijgen's always great advice and guidance, I thought it might be good to include this post from an older thread. It’s directly related to your initial screenshot although older and would need to be migrated to GSAP 3 with all its newer available features & utility methods, etc. Maybe it will also be useful to someone.

What article is that ? Similar has been inquired about previously on the GSAP forum. For instance this previous topic along with this one discussed a similar effect. The examples found in those threads should help you accomplish your goals, all the best with your project. PS: MorphSVGPlugin for the win, worth every penny. ?

Using @Rodrigo's above example the following would be closer to your example: gsap.set(skewBox, { rotation: 210, skewX: -30, scaleY:0.864 }); It might not be applicable to your desired setup (Div matching SVG) but wanted to mention that morphSVG plugin-in not only morphs shapes but also position and size, which at times can prove very useful. It would simplify things to choose all CSS or SVG, then either build everything with CSS and use the Flip plugin, or everything with SVG and use morphSVG, if you can ¯\_(ツ)_/¯.

You might be able to utilize some logic / approach from these two older pens by @OSUblake . https://codepen.io/osublake/pen/WjWPob https://codepen.io/osublake/pen/aRoqKm/c3a8ca782b69eedf260af82788d0084a

Welcome to the forum @zeus1021 , The vertical conversion has been discussed a few times already on the forum based on this original thread and subsequent article by @jh3y . See the following thread for an example of vertical conversion, take note to update the version of GSAP. That should get you going, good luck on your project.

Welcome to the forum @Pecuarios.com , thanks for being a Club GreenSock member. Based upon your description, I think the below examples will help you. These should all give you a starting basis of understanding to further modify things based upon your requirements and accomplish your desired criteria. https://codepen.io/osublake/pen/LdMjaL https://codepen.io/mikeK/pen/JjYaeRe/cf3df695077b033d9cab544546e2c3ca Here is a relative tutorial - https://www.motiontricks.com/movie-countdown-animation/ Here is another fun one not using GSAP, although with some effort the animation could be converted to use GSAP. https://codepen.io/lonekorean/pen/eYVrWoq Good luck on your project and enjoy using GSAP.