Rodrigo

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!

If the HTML/CSS can't be touched to achieve the result you're looking for, the simplest approach I can think is to give he start point of the ScrollTrigger instance a value bigger than the top of the viewport, perhaps 10 in order to emulate to some degree the result you're getting in the codepen due to the natural margin of the body tag: scrollTrigger: { start: "top 10", // when the top of the trigger gets to 10 px from the top of the viewport ... } Hopefully this helps. Happy Tweening!

Hi, The reason the issue doesn't happen on your codepen is because the body has is natural margin of 8px, so the markers are not at the top of the viewport: If you add margin: 0 to the body tag those markers are at the top of the viewport and the issue happens. Now what strikes me as odd is that you have this section with home-banner class that is supposed to have a height of 50vw but the image-cases section is on top of that element. You can see it if you remove all the JS from your codepen demo: The red line there is a border-top property I added to the image-cases section, so as you can see this is a CSS issue and not a GSAP related one. You should review the grid display you have in your setup in order to make it work. Hopefully this helps. Happy Tweening!

Hi, This is related to the way pinning works. This seems to solve it: * { box-sizing: border-box; } .recenica { width: 100%; padding: 100px; } Hopefully this helps. Happy Tweening!

Hi, This is actually a bit beyond being GSAP related. That is not an issue or an implementation problem, but a unique and custom requirement, and without being judgmental (even it could sound like that) a bit weird and that it doesn't make much sense. You want the overlay to be present until you leave the particular section where the boxes are, but at the same time you want to prevent the user from scrolling to the previous or next section, so only scroll within that particular section. What you could do is use the onLeave and onLeaveBack events in order to force the scroll position to either the start or end point of that section's ScrollTrigger, if the overlay element is open of course. https://greensock.com/docs/v3/Plugins/ScrollTrigger/scroll() But if I was you I'd leave the functionality you already have since blocking the scroll in a way that is not entirely intuitive sounds like terrible UX IMHO. If I can see the scroll bar, means that I should be able to scroll up and down, but if I'm not able to do that then I'd get confused and probably wouldn't use that site anymore, so my advice is to thread carefully in this subject. Hopefully this helps. Happy Tweening!

Hi, Are you looking for something like this? (better seen in full page): https://codepen.io/GreenSock/pen/gOzywPd Hopefully this helps. Happy Tweening!

Hi, The only thing I can think of in the way you describe this as a lag when scrolling up, is the default ease it gets applied to GSAP instance which is power1.out: https://greensock.com/docs/v3/Eases So as you can see the animation starts faster and then it slows down, that's why when going back it seems that there is a lag or delay soto speak, but that's just the easing function. One alternative is to try ease: "none" in your Tween config: gsap.to(".ai__desc", { rotation: 360, ease: "none",// no easing function scrollTrigger: { trigger: ".ai__main", pin: true, // pinSpacing: "margin", // pinReparent: true, // anticipatePin: 1, pinType: "transform", start: "top top", end: "+=2000", scrub: 1, markers: true } }); Hopefully this helps. Happy Tweening!

Hi, This is one option, you can change the speed by changing the space constant: https://codepen.io/GreenSock/pen/VwqxvoG Another alternative is using stepped ease: https://greensock.com/docs/v3/Eases/SteppedEase A third option would be using Advanced Staggers as @Carl shows in this video: Hopefully this helps. Happy Tweening!

Hi, The problem is that iOS has some issues with webcontainer, the technology Stackblitz uses is not compatible with all iOS browsers ? I created a Nuxt 2 project with the same code in my local machine and connected my iPad to it through my local network and it works exactly as it does on desktop on Safari and Chrome, so maybe I'm missing something here ?‍♂️ Happy Tweening!

Hi @ronniejd and welcome to the GreenSock forums! Is really hard for us to know exactly what the problem is with just some code snippets. Please create a minimal demo (keep it as small as possible) that clearly illustrates the problem you are having. We have a series of starter templates in Stackblitz for using GSAP in Vue3 apps: https://stackblitz.com/@GreenSockLearning/collections/gsap-vue3-starters Happy Tweening!

Hi @TruongNH and welcome to the GreenSock forums! Actually that site is not using scrolling at all if you inspect with devtools. Is actually moving things on the Y axis. For that you can use the Observer Plugin: https://greensock.com/docs/v3/Plugins/Observer That doesn't mean that this can't be done with ScrollTrigger. You can combine it with the ScrollTo Plugin in order to achieve this effect: https://stackblitz.com/edit/vitejs-vite-d73sck?file=src%2Fviews%2FLayers.jsx Navigate to the Layers Section route in order to see it in action. Hopefully this helps. Happy Tweening!

Hi @YvonneMH and welcome to the GreenSock forums! Maybe something like this could serve as a good starting point: https://codepen.io/GreenSock/pen/mdKWBmm Hopefully this helps. Happy Tweening!

Hey Sam, Sorry but I'm having a few issues understanding what's going on without a complete grasp of your app. Before adding Flip to the mix, you should have your filtering functioning without any animations whatsoever. That is, it should remove/add the elements and re-order the ones you keep or the ones you had plus the ones you're adding, without removing them from the DOM for now (you can actually do that once the filters are working as expected and the Flip animations are doing what they supposed to do as well). So for example, if you un-check A, then you should keep B-C-D elements visible and re-arrange everything so the grid looks the way it should. Then when checking A back those elements should be visible and the grid should be arranged accordingly. In the codepen example in my previous post if you comment out lines 14-22, run it again and check the DOM with devtools, you'll see that the filtered-out elements are still in the DOM, they're just not visible. The grid is arranged accordingly. When you add elements again, you'll see everything going back to the way it was. That's what you need to have first in order to plug Flip into it later. So my advice would be to forget about Flip and focus on the filtering and arranging the DOM first. When that is working I can assure you that Flip will fit like a glove. Hopefully this helps. Happy Tweening!