Rodrigo

Hi, This is a bit complex and mostly implies the starting and end points of each ScrollTrigger instance for each section, plus the start and end points of the instance that you want to scrub. That needs some extra space before the next section switch happens. Here is my initial approach to this: https://codepen.io/GreenSock/pen/QWzrRxm Hopefully this helps. Happy Tweening!

Hi, The simplest way is to add a label at the start of the timeline, before every other instance: const tl = gsap.timeline({ defaults: { paused: false, ease: "none", duration: 2 }, scrollTrigger: {...} }); tl.add("start"); That adds an extra stop at the start of the timeline and probably would make all the margins and other stuff to offset everything 10 pixels down not needed, but you'd have to test and see. Here is a fork of your codepen: https://codepen.io/GreenSock/pen/GRPdaoo Other than that it would require to write all the logic for the snapTo on a function in order to check the direction of the ScrollTrigger instance, current progress and check where the ScrollTrigger instance should land. Hopefully this helps. Happy Tweening!

Ahh OK. In that case going back to Draggable and using a proxy would be the best approach. Here is a simple demo: https://codepen.io/GreenSock/pen/zYyjXLW Hopefully this helps. Happy Tweeing!

Hi, I didn't said that the examples in that thread are exactly like the ones in the site you linked, just a starting point. There is a bit more custom logic involved into creating that and is not an extremely simple endeavor. In terms of learning, I would start by creating an animation that does what you want, without the mouse follow feature, then create the mouse follow feature that adds calls a method in order to add the image and then animate it. Sure sounds simple but is not that simple. Unfortunately cool effects like that never are and the learning curve sometimes is steeper than we'd like. Good luck! Happy Tweening!

Hi, There were a couple of logic issues in your codepen. This returned an empty array: gsap.utils.toArray(".container"); console.log(gsap.utils.toArray(".container")); // -> [] So that loop did nothing. Then you had a wrong selector in your ScrollSmoother setup: const smoother = ScrollSmoother.create({ content: "#content", smooth: 1, normalizeScroll: true, // ignoreMobileResize: true, effects: true, preventDefault: true }); There is no element with that ID on your DOM tree, so you have to change it to a class selector. This seems to work the way you expect: https://codepen.io/GreenSock/pen/RwEyEgd Hopefully this helps. Happy Tweening!

Hi @Bolargent, The codepen example that Cassie created is doing something completely different. There is no actual masking involved. Just an element with specific dimensions, an overflow hidden and a large border-radius applied to it: .mask { width: 200px; height: 200px; border-radius: 50%; overflow: hidden; } What Cassie is doing is moving the child element of that one based on the mouse position. That plus some other CSS magic tricks plus some simple math achieves that particular effect. Study the codepen and look at the result in devtools to understand how it works. Hopefully this clear things up. Happy Tweening!

Hi, Indeed it looks better with non breaking spaces. I updated the codepen example in my previous post. Happy Tweening!

Hi @Bolargent and welcome to the GreenSock forums! This thread could provide a good starting point: Hopefully this helps. Happy Tweening!

Hi, If you want to reverse the timeline as soon as it completes, is better to use repeat and yoyo. I had to create a completely blank example because your codepen has a lot of elements missing (or classes), so I'm getting a lot of warnings from GSAP that a target is not found: https://codepen.io/GreenSock/pen/GRPdwGB Hopefully this helps. Happy Tweening!

Hi, There are a few things to notice here. The site you posted as an example doesn't use scrolling at all. That doesn't mean that is not possible, is just weird to have natural scroll, having the scroll bar visible and not being allowed to scroll. These examples combines ScrollTrigger with Observer: https://codepen.io/GreenSock/pen/ExEOeJQ https://codepen.io/GreenSock/pen/oNdNLxL Finally you are using your ScrollManager file as a React component. While I can see the value of abstraction and keeping your code more organized IMHO I don't see that as a good and solid approach. Keep in mind that in React child component are rendered first and then their parents, so the code in that particular file runs before the DOM elements are mounted in the DOM on t he first run, so you could get some errors there. Also you are not using effect hooks, GSAP Context or doing proper cleanup in your app. I'd strongly recommend you to create your GSAP code in the same file it'll be used at first and then start abstracting away and micro-optimizing your code. First make it work the way is supposed and make it as easy to follow as possible (comments are helpful here), then make it pretty. Finally read the resources in this page: Hopefully this helps. Happy Tweening!

Hi, I would do it like this: https://codepen.io/GreenSock/pen/qBLYQZa Hopefully this helps. Happy Tweening!

Hi, You are animating the height of the container and you are also animating the font size of that <h1> element, a change in the offset top value is totally expected. In fact, considering what you are doing right now, if the offset top value didn't change at all would be totally unexpected. Keep in mind that changing the height of an element that also affects the document height, pretty much throws off the board every calculation ScrollTrigger makes, so most likely any ScrollTrigger instance that is created after this one will be affected by the change in the document's height. The one solution I can see in this case is, given the fact that you are animating the height between known values (from X pixels height to Y pixels height) you can offset your following ScrollTrigger instances, or your calculations used in the ScrollTo plugin by that amount, in order to correct that height change in the document. Hopefully this helps. Happy Tweening!

Hi, This is related to the initial position of the characters. Jack's original example has a different setup than the one you actually need in order to spread out the characters in the path. This seems to work as expected: https://codepen.io/GreenSock/pen/GRPdYMN Hopefully this helps. Happy Tweening!

Hi, There are a few approaches to this: https://codepen.io/GreenSock/pen/eYbWqwE https://codepen.io/GreenSock/pen/xxmPWqa Hopefully this helps getting you started. Happy Tweening!

Hi @Nordef and welcome to the GreenSock forums! Thanks for being a Club GreenSock member and supporting GreenSock! 💚 I think this is a better fit for the Observer Plugin rather than Draggable: https://greensock.com/docs/v3/Plugins/Observer Also I can't see the element that you should suppose to drag when the modal/sheet is not visible. On top of that I think you are over engineering this a bit IMHO, the approach I would use is far simpler (drag the fuchsia bar): https://stackblitz.com/edit/vitejs-vite-gmz1zq?file=src%2Findex.css,src%2FApp.jsx,src%2FOverlay.jsx&terminal=dev No need for that useCallback, since everything can be resumed into a single timeline and you can play/reverse that one using the onDragEnd callback from Observer and check the direction with the deltaY value. Also I noticed you are not using GSAP Context in your React app: https://greensock.com/docs/v3/GSAP/gsap.context() When using GSAP in React environments GSAP Context is your best friend since it allows you to scope your selectors inside and allows you to easily cleanup in the cleanup phase of the effect hooks. I strongly recommend you to check the information in this page: And the starter templates collection we have in Stackblitz: https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters Hopefully this helps. Happy Tweening!