sparks

Sorry - I just saw your reply! I'm sure it has something to do with the site and its contents, not with ScrollTrigger. The refresh was more like a short-fix since the page had to go online. I will investigate further and try to find out what's the reason for it. I couldn't post a demo, since its the whole site itself that surely is causing the problem

Thanks for your input. I didn't think of potential lazy loading. I deactivated it, but the results were the same. I solved it by running ScrollTrigger.refresh() once it reaches certain scroll positions, which did the trick for me.

Hey, thanks for the answer! I think it has nothing to do with the browser address bar, since it also doesn't work in chrome mobile preview, where there's no address bar that pops in.. I have a feeling that through this responsive layout where a few columns are hidden, result in a different page height, which might confuse the script? But I think that can't be it, cause Scrolltrigger gets the current document height... I just think of that because it works when I run ScrolLTrigger.refresh() as soon as the object comes into view. I'm happy for any other ideas?

Hi everyone, I can't provide a CodePen example, since a work in progress and too complex. The problem only appears on mobile (iPhone Safari), Desktop and even iPad works fine. But I think my explanation of the problem might already be enough: I have a one-pager, where I use GSAP together with ScrollTrigger and ScrollSmoother. I have several paragraphs with a headline and some text. Currently, I pin each headline to the top, as soon as it gets there. In the end value, I define how long it should be (until the complete paragraph of text below it has scrolled above it). I have this code for every headline, with its own classes and start / stop values. The start / stop value is set depending on the current device. gsap.to(".headline_sortiment", { scrollTrigger: { trigger: ".headline_sortiment", start: (() => { if (deviceDesktop) { return "top 0px"; } else if (deviceTablet) { return "top 0px"; } else if (deviceMobile) { return "top 0px"; } })(), end: (() => { if (deviceDesktop) { return "4000px top"; } else if (deviceTablet) { return "4000px top"; } else if (deviceMobile) { return "4000px top"; } })(), pin: true, pinSpacing: false, scrub: true, onEnter: () => { const headlineSortiment = document.querySelector(".headline_sortiment"); headlineSortiment.style.background = "linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.8407738095238095) 46%)"; }, onLeave: () => { const headlineSortiment = document.querySelector(".headline_sortiment"); headlineSortiment.style.background ="linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.8407738095238095) 46%)"; }, onLeaveBack: () => { const headlineSortiment = document.querySelector(".headline_sortiment"); headlineSortiment.style.background = "transparent"; }, }, }); My problem is the following: When I'm on mobile view and scroll down, the first headline pins fine, but the second one (code above) starts pinning about 5-600px below the top of the window. This happens for every headline following as well. I guess it has something to do with the mobile calculation of the document height. When I scroll to the first headline and wait until it sticks (wrongly) around 600px from the top, and then enter ScrollTrigger.refresh() into my JS Console, it instantly places the headline where it should be. This works also for every other headline. Is there any way to programmatically refresh everything once the headlines come into view? I guess that could solve my problem. I tried creating an event listener and refresh after every scroll, but that's of course no viable option. Any help is greatly appreciated. Thank you!

Thanks a lot guys! I updated to the latest versions and that seemed to do the trick. Thanks agian!

Hi there, I have build a page with a lot of GSAP Animations and I'm very happy so far. The only problem I have is in Firefox, and I can't wrap my head around whats happening here. Here's the example: If you go to *** and then scroll down and click on one of the 4 "Service Blocks" (Beratung/Planung/Realisierung/Wartung), it opens a new page. When you click the top right "X" ont he new dark service page, it goes back to the last page ( in this case ***) and goes down to the serviceBlock, by using the Anker #serviceBlock. This works so far. But when I then try to scroll on the page, I can't scroll up or down anymore. It seems the whole page is broken. Does this have anything to do with Firefox aggressive caching? Its working fine in Chrome!? Any help would be greatly appreciated here. Thanks a lot!!

Hi everyone, I'm pretty new to GSAP but really love it so far and was able to make some cool animations with it! Now I'm facing something I can't grasp on how to build yet and would appreciate any help with that to guide me on the right path. I try to explain what I want to do: I have a "container" div in which I have several "slide" divs. Each of the "slide" divs contain three texts (small headline, big headline and description). When the main "container" comes into view (with ScrollTrigger) and has come to the middle of the screen (based on its height), I'd like the first "slide" div to show up. But it shouldn't just show up or fade in. As I keep scrolling, the "bigHeadline" should appear in 400px font-size (fade In), when I continue scrolling it should scale down until it reaches the position in my CodePen. As soon as it reaches that position / size, it stays like that. When I continue scrolling, the "smallHeadline" and "description" show up. They both can Fade In or whatever. After everything is visible, and I keep scrolling, I want it to stay on the screen for a few seconds / frames and then fade out. When I then continue scrolling, it should do the same with the next available "slide" div. Once it reaches the last "slide" div and played the animation for it, it shouldn't do anything else. If I scroll up from that position, everything should reverse. I hope I was able to explain it as simple as possible. I've attached a CodePen, so you can better see the structure. The main problem is, that I don't know where to start or how to assemble this. I'd start with building the animation for each element with a ScrollTrigger and scrub, I guess? But how do I "chain" all the other "slide" divs to that? Edit: I'm also using your SmoothScroll function on the page if that is maybe important to know. Really appreciate any help with this. Thanks a lot.

That did the trick. Thank you very much! For any other one having the same problem: I only used gsap.to(...) instead of gsap.fromTo(...)

Hi there, I'm pretty new to GSAP and love it so far. I only have one problem to which I can't find a solution. I'm usign GSAP together with WordPress and Elementor. When I add a ScrollTrigger Animation for an Element that should Fade In on Scroll, it works absolutely fine in the browser. Since I have to set the opacity of the Element to 0 via CSS, the Element won't be visible in the Backend-Editor of Elementor. This makes it hard to use both together. Is there any workaround I'm not seeing? I tried to find body classes that are only available in the final page and not in the backend editor, so I can set the elements to opacity 0 only there. I hope my question makes sense.. Thanks in advance!