Dylekter Posted December 21, 2020 Share Posted December 21, 2020 Hi! When I remove the markers property or set it to false, the ScrollTrigger stops working. Why? PS: With markers it works let tl2 = gsap.timeline(); tl2.from(".root--offer__header", { xPercent: 650, }); ScrollTrigger.create({ animation: tl2, trigger: ".root--offer__header", start: "top top", end: "+=4000", scrub: true, pin: true, anticipatePin: 1, duration: 2, ease: "none", markers: true, }); Link to comment Share on other sites More sharing options...
Solution ZachSaucier Posted December 21, 2020 Solution Share Posted December 21, 2020 Hey Dylekter and welcome to the GreenSock forums. Almost always when this happens it means that your page doesn't have scrolling in it without the markers. In your ScrollTrigger code you can see that ScrollTrigger is adding 4000px of height to the page, which will make the page scroll in almost every situation. Since you have a scrub of true, the animation is controlled by the scroll position. But if there is no scrolling then there is no progressing through the animation. Does that make sense? We'd be happy to point out how to fix this with code if you provide a minimal demo but you very well may be able to fix the issue yourself knowing this information Link to comment Share on other sites More sharing options...
Dylekter Posted December 21, 2020 Author Share Posted December 21, 2020 I found solution, section was to short and i didnt have scroll space Link to comment Share on other sites More sharing options...
Apnw2 Posted April 29, 2022 Share Posted April 29, 2022 Hello, I have exactly the same problem but I'm wondering what is the solution. I'm trying to implement a horizontal scroll very similar to See the Pen YzygYvM by GreenSock (@GreenSock) on CodePen . It works fine when I put the markers but stop working when I remove it. If a CodePen seems useful I could try to provide it. In the demo there is height: 100vh; So where is the space necessary to scroll in there ? Thanks to enlighten me. Link to comment Share on other sites More sharing options...
OSUblake Posted April 29, 2022 Share Posted April 29, 2022 Hi @Apnw2 It would be very helpful if you could provide a minimal demo that clearly shows the issue, and feel free to start a new topic in the forum. 1 Link to comment Share on other sites More sharing options...
manuki Posted December 14, 2023 Share Posted December 14, 2023 Hello, im having the same issue with this animation. I cant set the markers to false or hide the markers because the animation stops working. How can i fix? Here is an example https://www.anderson.ucla.edu/lib/email/JWGLA/2024/web/index-manu.html Thanks Link to comment Share on other sites More sharing options...
Rodrigo Posted December 14, 2023 Share Posted December 14, 2023 Hi @manuki and welcome to the GSAP Forums! There is not a lot we can do on a live site, unfortunately. It'd be super helpful if you could create a minimal demo that clearly illustrates the problem you're having. There is no need to create a copy of your whole project, just a few colored divs that show the issue at hand. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
GreenSock Posted December 14, 2023 Share Posted December 14, 2023 Yeah, my best guess is that you set up your CSS/markup so that the page doesn't actually have the height to get to the scroll positions you're setting, so when you enable markers those actually stretch the page tall enough to where you can reach them. In other words, imagine your page is natively 100vh tall (no scrolling available) and then you set up a ScrollTrigger with a start: 2000 (starts 2000px from the top). Without markers enabled, you'd never be able to get to that start position. But if you enable markers, you'd suddenly have a marker that's injected into the DOM at 2000px, thus you'd now be able to scroll to that spot. Good luck! 2 Link to comment Share on other sites More sharing options...
manuki Posted December 14, 2023 Share Posted December 14, 2023 1 hour ago, GreenSock said: Yeah, my best guess is that you set up your CSS/markup so that the page doesn't actually have the height to get to the scroll positions you're setting, so when you enable markers those actually stretch the page tall enough to where you can reach them. In other words, imagine your page is natively 100vh tall (no scrolling available) and then you set up a ScrollTrigger with a start: 2000 (starts 2000px from the top). Without markers enabled, you'd never be able to get to that start position. But if you enable markers, you'd suddenly have a marker that's injected into the DOM at 2000px, thus you'd now be able to scroll to that spot. Good luck! Thank you, i think i get it. Im new to gsap and not well versed in js, so its hard to understand what i need to do apart from setting my body to be tall like 7000px or something like that right? Love the versatility gsap has, hope to get to use it more. Thanks Link to comment Share on other sites More sharing options...
GreenSock Posted December 14, 2023 Share Posted December 14, 2023 Yeah, if you need some help @manuki please make sure you provide a minimal demo, like a CodePen or Stackblitz that clearly shows the issue. A live site is just too cumbersome to try to troubleshoot and tweak things. Good luck! 👍 1 Link to comment Share on other sites More sharing options...
manuki Posted December 14, 2023 Share Posted December 14, 2023 Hi, sorry for not providing a minimal demo, im not sure how to do it for the issue im having, which is chrome not playing the full animation. It stops mid-way. on Mac Safari, it plays till the end, but not no chrome... Any known issues or recommendations? Link to comment Share on other sites More sharing options...
GreenSock Posted December 14, 2023 Share Posted December 14, 2023 1 hour ago, manuki said: Hi, sorry for not providing a minimal demo, im not sure how to do it for the issue im having, which is chrome not playing the full animation. It stops mid-way. on Mac Safari, it plays till the end, but not no chrome... Any known issues or recommendations? Sorry, we simply cannot troubleshoot this blind. If you want help, you MUST find a way to show us with a minimal demo. If you can consistently get it to break in your environment, then you should create a CodePen that's just a minimal version of that...and if it works, then start changing it to be closer and closer to the "real" project (not as minimal). At some point, it'll break and you'll know exactly what you changed to make it break and you can post here. This doesn't sound like anything related to GSAP, honestly. I could be wrong, of course. But GSAP is quite consistent across browsers. I'm very curious to see a minimal demo so we can inspect what's going on. 1 Link to comment Share on other sites More sharing options...
manuki Posted December 15, 2023 Share Posted December 15, 2023 Ok i think i got it. See the Pen jOdjpNo by manuki76 (@manuki76) on CodePen Here's the pen, on this version is not working properly like on the link, maybe we are setting things wrong, so any input is welcomed. Thanks Link to comment Share on other sites More sharing options...
Rodrigo Posted December 15, 2023 Share Posted December 15, 2023 Hi, There isn't a ScrollTrigger instance with pinning in your demo, the only one could be this: var tl_intro = gsap.timeline({ scrollTrigger: { trigger: ".anim-tl", start: "bottom bottom", end: '4rem center', scrub: true, toggleActions: "play complete reverse reverse", invalidateOnRefresh: true, anticipatePin: 1 } }); But even if you have anticipatePin on the config there is no pin: true/element/selector in the config. Please provide a minimal demo (no need to add all that HTML/CSS/JS just a few colored divs) that clearly shows the problem you're having. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
GreenSock Posted December 15, 2023 Share Posted December 15, 2023 Yeah, that isn't exactly a minimal demo, and there are quite a few basic problems with it like pasting HTML tags into the JavaScript panel, links to missing JS files, missing dependencies like jQuery, using SUPER old version of GSAP, etc. It'll definitely increase your chances of getting a good answer if you provide a minimal demo and also explain precisely what you mean by "...is not working properly". By the way, this looks very odd to me: start: () => `${(headings.length) * window.innerHeight - 500} top`, end: () => `top top`, That would make it end BEFORE it starts Here's a fork of your demo that fixes a few of the very basic things, but I really don't know what isn't working the way you'd expect so you'll have to take it from here and fill in the details and hopefully make it a much more minimal demo: See the Pen RwvzBoJ?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
manuki Posted December 15, 2023 Share Posted December 15, 2023 27 minutes ago, GreenSock said: Yeah, that isn't exactly a minimal demo, and there are quite a few basic problems with it like pasting HTML tags into the JavaScript panel, links to missing JS files, missing dependencies like jQuery, using SUPER old version of GSAP, etc. It'll definitely increase your chances of getting a good answer if you provide a minimal demo and also explain precisely what you mean by "...is not working properly". By the way, this looks very odd to me: start: () => `${(headings.length) * window.innerHeight - 500} top`, end: () => `top top`, That would make it start BEFORE it ends Here's a fork of your demo that fixes a few of the very basic things, but I really don't know what isn't working the way you'd expect so you'll have to take it from here and fill in the details and hopefully make it a much more minimal demo: What i meant, is that its not consistent. The behavior. It scrolls through the first 5 facts, then blurs and then text animates from right, then it animates to end screen. This flow works sometimes, and sometimes it gets like stuck. and doesnt go further than the 5 first facts. But from your fork, it seems to have fixed that. As for the js versions, i used a demo from gsap, so those were the files referenced, i didnt know there were new ones. I would like to use the latest ones. Thank you Link to comment Share on other sites More sharing options...
manuki Posted December 15, 2023 Share Posted December 15, 2023 19 minutes ago, manuki said: What i meant, is that its not consistent. The behavior. It scrolls through the first 5 facts, then blurs and then text animates from right, then it animates to end screen. This flow works sometimes, and sometimes it gets like stuck. and doesnt go further than the 5 first facts. But from your fork, it seems to have fixed that. As for the js versions, i used a demo from gsap, so those were the files referenced, i didnt know there were new ones. I would like to use the latest ones. Thank you Thank you so much for this fork, its working perfectly!!! now i can work on css!! Thank you 1 Link to comment Share on other sites More sharing options...
Rodrigo Posted December 15, 2023 Share Posted December 15, 2023 49 minutes ago, manuki said: I would like to use the latest ones. You can get them from here: https://cdnjs.com/libraries/gsap Also you can take a look at our installation page to find out more: https://gsap.com/docs/v3/Installation Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now