Rodrigo

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!

Hi, Basically the issue is that you are running an extra loop for the slides of each section. Here is a fork of your codepen: https://codepen.io/GreenSock/pen/KKboBBd Hopefully this helps. Happy Tweening!

Hi, I'm not seeing that error in your demo and I created a new React app in my local machine with your exact same code and also can't see the error. There must be something else in your config that is causing this and I just can't see it ?‍♂️ Happy Tweeing!

Hi, The simplest way I can think of is using Clip Path: https://codepen.io/GreenSock/pen/jOQpPGO You can create a combination of ClipPath with CSS Variables for targeting multiple elements: https://codepen.io/GreenSock/pen/PowWgOz Another option could be masking: https://codepen.io/GreenSock/pen/eYLJeqx Hopefully this helps. Happy Tweening!

Mhh.... I don't know what to tell you. When scrolling up and down it works as expected in the codepen example: https://codepen.io/GreenSock/pen/gOZeojP So there has to be something else in your setup that is causing this issue. Is worth noticing that you have some CSS animations in your styles, be sure that is not affecting/animating the same element(s) you are animating with GSAP, because that will create an issue of it's own. Happy Tweening!

Hi @issam.seghir and welcome to the GreenSock forums! This is not a GSAP related issue, but more a CSS one. It seems to me that this stems from here (taken from the MDN docs): https://developer.mozilla.org/en-US/docs/Web/CSS/container-type#values inline-size Establishes a query container for dimensional queries on the inline axis of the container. Applies layout, style, and inline-size containment to the element. So then the layout containment does this: Note: using layout, paint, strict or content values for this property creates: A new containing block (for the descendants whose position property is absolute or fixed). A new stacking context. A new block formatting context. The problem is in #2. The fact that creates a new stacking block creates the problem you're seeing as mentioned here: https://stackoverflow.com/questions/15194313/transform3d-not-working-with-position-fixed-children You can use pinType: "transform" in order to fix this: gsap.to(".ai__desc", { rotation: 360, scrollTrigger: { trigger: ".ai__main", pin: true, pinType: "transform", start: "top top", end: "+=2000", scrub: 1, markers: true } }); Hopefully this helps. Happy Tweening!

Hi, @PointC has a few good examples about this: https://codepen.io/PointC/pen/rNeQNgw https://codepen.io/PointC/pen/BaPyQdg Hopefully this helps. Happy Tweening!

Hi @ti-sign, Great work, looks really nice! Thanks for sharing your work with the community! ? Happy Tweening!

Hi, Using a combination of ScrollTrigger and the ScrollTo Plugin to scroll to a specific location, especially when you have pinned sections with ScrollTrigger is not as trivial as using the height of the elements, their offsetTop or other properties. Is always better to use ScrollTrigger in order to get the specific scroll distance using the start/end points. I checked your code for that quickly and it doesn't look like the best approach IMHO In this demo for example: https://codepen.io/GreenSock/pen/BaqbNzG The calculations are being made in line 195 in order to get the correct scroll position of each section. Granted this uses ScrollSmoother's scrollTo method, but using the ScrollTo plugin shouldn't be too different. The other issue here, as @Carl mentions, is the fact that you are animating the container of the yellow boxes on the Y axis and you are creating ScrollTrigger animations for the yellow boxes. So ScrollTrigger calculates the start and end values for those, when the parent of the yellow boxes hasn't moved yet, then you move that on the Y axis, so all the calculations are useless because the actual positions of the yellow boxes has shifted. Here is a super simple example (It should look better in a different tab): https://codepen.io/GreenSock/pen/QWzQMyv Hopefully this helps. Happy Tweening!

Hi @mixpofo and welcome to the GreenSock forums! Minor version updates never include breaking changes, just new features and, in this case of non-consecutive minor versions, quite a few bug fixes, so nothing GSAP related should break that code. My suspicion is that React's Strict Mode could be the cause of this problem. Since version 18, React calls the effect hooks (useEffec/useLayoutEffect) twice, which has caused a lot of headaches. This causes ScrollTrigger instances, for mention just one issue, to get executed twice, completely messing up the calculations in the second run, especially for pinned elements. Since version 3.11.0 we have GSAP Context in order to help with that and a lot of other situations where it's very handy: https://greensock.com/docs/v3/GSAP/gsap.context() I suggest you to check the resources in this page: As well as the starter templates we have in our Stackblitz collection: https://stackblitz.com/@GreenSockLearning/collections/gsap-nextjs-starters Here is a specific one using NextJS and ScrollTrigger: https://stackblitz.com/edit/nextjs-5cm4qn Basically your code should look like this: useEffect(() => { const ctx = gsap.context(() => { const extElements = document.querySelector("#extElements"); const tween = gsap.to(extElements, { x: () => getScrollAmount(), duration: 3, ease: "none" }); ScrollTrigger.create({ trigger: ".extWrap", start: "top 0%", end: () => `+=${getScrollAmount() * -1}`, pin: true, animation: tween, scrub: 1, invalidateOnRefresh: true, markers: false, }); }); return () => ctx.revert(); }, []); Hopefully this helps. Happy Tweening!

Hi Sam, There is a lot going on in your demo and we don't have the time resources to go through all that code and see what could be the issue. I'd suggest you to try the Flip Plugin that was made for stuff like this, especially check this demo: https://codepen.io/GreenSock/pen/NWRxarv Hopefully this helps. Happy Tweening!

Hi @Amesh Suthar and welcome to the GreenSock forums! Is really hard for us to do much without a simple minimal demo that clearly illustrates the problem (for future threads, always include a minimal demo so we can tinker with your code and help you in a faster way). In this case the issue seems to be related to that final-to-first transition, right? Lucky for us @Carl created an excellent video tutorial, blog post and demo about achieving this with staggers: Here you can find the blog post and demo: https://www.snorkl.tv/greensock-staggers-with-seamless-loops/ Hopefully this helps. Happy Tweening!