Rodrigo

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!

Hi, That's because of your CSS, not GSAP/ScrollTrigger related (if you comment out all the JS you won't see the placeholders neither). The issue is here: .scrolltrigger-container { height: 100vh; overflow: hidden; position: absolute; width: 100%; } Those basically are on top of the placeholders. Changing the position to relative fixes the issue. I updated the codepen example. Happy Tweening!

Hi, I'm having a bit of trouble understanding the concept here. You mean something like confetti: https://confetti.js.org/ Also IDK how doable this could be. Granted I have exactly ZERO experience with banners, but I think it would be difficult to control something that happens in the browser window from the iframe that loads the banner and, again zero experience with that as well, IDK how feasible is to put something globally (like fixed position) from an iframe. My doubt stems from a security stand point, as a site owner if I agree to put add banners to it, I wouldn't be a happy camper if the code in those banners could access my HTML and possibly make changes to it or run global scripts. I'm just babbling regarding my line of expertise here so I could be wrong about the way I'm interpreting your question. Happy Tweening!