mikel

Hey @hiba Welcome to the GreenSock Forum. There are many paths that lead to the goal. Just try something and show us it in a small CodePen. A small case says more than a thousand words. Then we can better understand what you want to achieve. Happy tweening ... Mikel

Hey @JJJ, Perhaps you mean such effects that you can achieve with GSAP.observe. https://codepen.io/mikeK/pen/KKZKWKj/14611e829c8a93a47c4b6f3ad826d101?editors=0110 Happy observing ... Mikel

Hey @Hysteresis, You should coordinate line draw and scroll movement also so that the course of your green line (the tip) does not run out of the viewport, is always in the picture. Here's an example ... https://codepen.io/mikeK/pen/MWoaXjV/13e3ffd92460b9cd26b1e5f793b640f8?editors=0110 Happy scrolling ... Mikel

Hey, The GSAP ScrollTrigger could offer another kind of 'helper'. It offers onUpdate the current progress = 'position of motionPath'. And that for any desired on the path. https://codepen.io/mikeK/pen/PoEmJyY??editors=1100 Happy helping ... Mikel

Hey @Dennyno, Try it step by step. https://codepen.io/mikeK/pen/QWOBXBL Happy opening ... Mikel

Fascinating what you can do with arrays. I've learned something. https://codepen.io/mikeK/pen/ExoNwdJ?editors=1010

Hey @bannerboy, Welcome to the GreenSock Forum. Maybe I don't understand your intention correctly, it would definitely work that way. https://codepen.io/mikeK/pen/KKZNvbN Happy tweening ... Mikel

Hey CARL, I was fascinated by the short code and didn't check it! Thank you. Mikel

Hey @mjray, Take a good look at the code. Little but effective. https://codepen.io/mikeK/pen/WNdGbgR Happy tweening ... Mikel

Hey @codanux, You could also use one forEach function (for both sections). And function based values combined with invalidateOnRefresh:true for the scrollTrigger. I like to test / choose the speed with appropriate relative values for the parameter 'end'. https://codepen.io/mikeK/pen/RwxGNZz Happy tweening ... Mikel

Hey @Istiak Hossain Tushar Does this example match your ideas? https://codepen.io/mikeK/pen/ZEvOmeb EDIT: The example has been exchanged! Happy tweening ... Mikel

Wraps have been more on my menu so far. Thank you Blake. P.S. Change UP and DOWN.

Hey @Wizard of Oz This would be my logic to design a continuous slider. Expandable with split text. If you are interested in array methods, more e.g. here. https://codepen.io/mikeK/pen/qBpZObp Happy tweening ... Mikel

Hey @chacrasoftware, Here is a concept that mixes ScrollTrigger and ScrollTo while adjusting speed to the distances. Maybe helps for your logic. https://codepen.io/mikeK/pen/PomGKON Happy scrolling ... Mikel

Hey @chacrasoftware, Welcome to the GreenSock Forum. There are many paths that lead to a goal. Just try something out and show us it in a small CodePen. A small case says more than a thousand words. Then we can better understand what you want to achieve. Happy tweening ... Mikel

Hey @fernandocomet, If the background has full color, then it can go like this ... https://codepen.io/mikeK/pen/jOYWPvO?editors=1010 You need a 'mask' which covers the relevant part. Try handwritten SVG code. There are some good tutorials. Happy coding ... Mikel

Hey @archimedo, Do you mean this effect? Scrub links the progress of the animation directly to the scrollbar so it acts like a scrubber. You can apply smoothing so that it takes a little time for the playhead to catch up with the scrollbar's position! It can be any of the following Boolean - scrub: true links the animation's progress directly to the ScrollTrigger's progress. Number - The amount of time (in seconds) that the playhead should take to "catch up", so scrub: 0.5 would cause the animation's playhead to take 0.5 seconds to catch up with the scrollbar's position. It's great for smoothing things out. Here the setup changed a bit. Test different scrub values... https://codepen.io/mikeK/pen/oNpbgwX?editors=0010 Happy scrubbing ... Mikel

Hey CARL, And you can be really proud of your long green socks history. And of course on your hyper express for young GreenSocks fans. Pick up the schnoz! Mikel

Hey CARL, I can't find WORDS. https://codepen.io/mikeK/pen/yLpYvQJ??editors=1010 Happy shrinking ... Mikel

Hey @popland, Could this be a solution for you? With more than two options, random is also more fun. https://codepen.io/mikeK/pen/NWXqRqM Happy closing ... Mikel

Hey @fernandocomet, There are several options: https://codepen.io/mikeK/pen/ZEGyeEr https://codepen.io/mikeK/pen/NWXPpde??editors=1010 Do you mean something like that? Happy tweening ... Mikel

Hey @lt852, DOM, SVG, <canvas>, and beyond GSAP doesn't have a pre-defined list of properties it can handle. It's super flexible, adjusting to almost anything you throw at it. GSAP can animate all of the following: CSS: 2D and 3D transforms, colors, width, opacity, border-radius, margin, and almost every CSS value. SVG attributes: viewBox, width, height, fill, stroke, cx, r, opacity, etc. Plugins like MorphSVG and DrawSVG can be used for advanced effects. Any numeric value For example, an object that gets rendered to an <canvas>. Animate the camera position in a 3D scene or filter values. GSAP is often used with Three.js and Pixi.js. More info in the DOCs e.g. on the page of GSAP CSSPlugin. Happy tweening ... Mikel

Hey @zinjo, You could play with arrays for example. https://codepen.io/mikeK/pen/GRyRXGw?editors=0110 Happy tweening ... Mikel

Hey @BUMBLE-BEE, Welcome to the GreenSock Forum. Check out GSAP ScrollTrigger and the many examples there. This is the tool and these are the suggestions that will help you. Happy tweening ... Mikel

Hey @iDad5, You could use ScrollTrigger.addEventListener. Here an example https://codepen.io/mikeK/pen/RwWXbXb/c1099fe6d3d8c43ec2b928f006551450?editors=1010 Happy scrolling ... Mikel