Shutt90 Posted February 9, 2022 Share Posted February 9, 2022 (edited) I'm fetching data from the database but if I scroll too quickly as shown in the video the markers are stuck at the top of the page. I've wrapped it all in DOMContentLoaded, as well as went through the common mistakes and changed "top" to "0" but nothings working still. I don't think I can attach a full codepen for the issue but have attached one of my scrolltrigger calls. Delay and stagger are arguments wrapped in the outer function which I've ruled out. Video is attached below. EDIT* I've also added a loading screen and deactivated mousewheel event temporarily on page load as well as overflow hidden in a delay hoping that would fix it but still nothing const digitalBlock = document.getElementById(block) let digitalH = digitalBlock.querySelector(childElement) digitalText = digitalH.textContent const digitalSplit = Array.from(digitalText) let newText = [] digitalSplit.forEach(letter => { newText.push(`<span>${letter}</span>`) }) const joinedString = newText.join('') digitalH.innerHTML = joinedString gsap.from(digitalH.children, { scrollTrigger: { trigger: digitalBlock, start: '0% 70%', end: '50% 10%', toggleActions: 'play reverse play reverse', markers: true }, y: 200, opacity: 0, stagger: stagger, delay: delay, }) https://liampugh.co.uk/ShareX/brave_na9egQn9A7.mp4 Edited February 9, 2022 by Shutt90 Added things to rule out Link to comment Share on other sites More sharing options...
akapowl Posted February 9, 2022 Share Posted February 9, 2022 Hello there @Shutt90 Unfortunately in 99% of cases it is close to impossible to help with ScrollTrigger related issues just from a look at a code-snippet or video. For one, scroll-based animations are heavily dependent on a fitting HTML markup and CSS styling, and furthermore as you mentioned yourself, there is a whole lot more going on on your page than just what is to be seen in the code you posted. There are just too many possible factors for reasons that might be causing your issue (like when and how you load your JS files, when and how you fetch the data, wether something like e.g. images being loaded in late causes a change to your layout etc. ) so a minimal demo will siginficantly increase your chances of getting a solid answer. Most of the times breaking things down to the bare minimum for re-creating your issue even helps find the culprit yourself. This pen here fetches data from a placeholder API (which you might also use for aa demo of your own if you can't or don't want to include your data) and then inserts it into the DOM, and it appears to be working quite alright. See the Pen dyZveRy by akapowl (@akapowl) on CodePen It might also be worth noting, that there is a regression with .from() tweens in GSAP 3.9.1, so you might have to add a lazy: false to your tween to make it work correctly if you are using that current version. 3 Link to comment Share on other sites More sharing options...
Shutt90 Posted February 9, 2022 Author Share Posted February 9, 2022 Hi Akapowl, After racking my brain for a few days I've just stuck it all in a setTimeout before triggering any of the functions and giving it 100ms because calling them in and it seems to be working fin. Not sure if the issue was with my DOMContentReady having an issue with my string split and stagger but anyways the issue is solved. Thank you for your help, I'll certainly look into lazy: false in furture too Link to comment Share on other sites More sharing options...
StratoDEV89 Posted February 23 Share Posted February 23 On 2/9/2022 at 6:25 AM, Shutt90 said: I'm fetching data from the database but if I scroll too quickly as shown in the video the markers are stuck at the top of the page. I've wrapped it all in DOMContentLoaded, as well as went through the common mistakes and changed "top" to "0" but nothings working still. I don't think I can attach a full codepen for the issue but have attached one of my scrolltrigger calls. Delay and stagger are arguments wrapped in the outer function which I've ruled out. Video is attached below. EDIT* I've also added a loading screen and deactivated mousewheel event temporarily on page load as well as overflow hidden in a delay hoping that would fix it but still nothing const digitalBlock = document.getElementById(block) let digitalH = digitalBlock.querySelector(childElement) digitalText = digitalH.textContent const digitalSplit = Array.from(digitalText) let newText = [] digitalSplit.forEach(letter => { newText.push(`<span>${letter}</span>`) }) const joinedString = newText.join('') digitalH.innerHTML = joinedString gsap.from(digitalH.children, { scrollTrigger: { trigger: digitalBlock, start: '0% 70%', end: '50% 10%', toggleActions: 'play reverse play reverse', markers: true }, y: 200, opacity: 0, stagger: stagger, delay: delay, }) https://liampugh.co.uk/ShareX/brave_na9egQn9A7.mp4 Hello, I had the same problem and I solved it by doing a lazy creation of the instance, that is, in a function I delegate the creation of the instance and as soon as the data arrives from the fetch, I call the function, I use angular and the data arrives in observables so I can run code on the subscribers to do this, additionally as a security measure, after creating the Scrolltriggers it runs a refresh within a setTimeout of 500 or 1000, and this manages any failure that may remain when loading the data in the DOM 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