samd

Hey Jack I tried your advice of adding will-change but i'm afraid this didnt yield much luck, so you can see what I'm seeing (on a fast machine also) here is a video of the jankyness. https://share.cleanshot.com/ZcKs2hbP

Hey so I'm trying to create an effect like this video reference: https://share.cleanshot.com/42chCZwd It has this pinned scrolltrigger type animation at the start, and then has a series of parallax feel effects throughout. When I use scroll smoother I seem to get two issues, jankyness of the previously pinned header section, and these lines throughout sections in the site. The lines I think I could probably solve by doing more css I reckon? But the jankyness I'm not sure how to fix. I've made two minimal demos on codesandbox showing my issues and how I've got so far and visualising the jankyness in the scroll smoother version With scroll smoother sandbox With scroll smoother url Without scroll smoother sandbox Without scroll smoother Let me know your best advice. p.s. -- Also this is the issue with the lines (less important) on my actual working version of the site -- https://share.cleanshot.com/F0XMPWJl

Thanks for replies so far I'm going to try to work with your solution so far Jack. I guess I have a couple of additional follow ups on my implementation. Is it possible to pass params into my timeline so I can make one timeline that is reusable within a function for my different dropdown content. Should I wrap all of my animations inside a context incase I need to stop all animations at once or is killing animations individually the best approach What is the best practice way to check the state of my animations (e.g. by using booleans with onCompletes updating them or something else?) So I can track reliably when the wrapper is open or not (and if the animation is finished before triggering the following animation) and if content is inside it or not and which if so. Should I debounce all my event listeners? so if multiple clicks are fired only one tween is fired or is this already built in Also just noting I'm using vanilla ts and not react So I'd ideally like to create timelines for the following variables I used tweens however as I wasnt sure if I could pass down parameters from my openNavMenu function which resulted in repetitive code Another thought is, because this issue is intermittant. Is it worth me using some sort of global isAnimating which checks for any current timelines tweens with in a context as animating and either kills them all or stops more tweens from firing whilst they finish. // I ideally would have something like the below. But I'm unsure if I can pass parameters to a gsap timeline in the same way I can in a standard tween. const openLargeContentWrapper = gsap.timeline({}) // some timeline goes here the wrapper is always the same so I do not need to pass params const openLearnDropdown = gsap.timeline({}) // this is a seperate navigation dropdown to the others. const fadeInLargeContentItem = gsap.timeline({}) // I'd like to pass a parameter to this so it can be reused for both the "features and the about dropdowns inner content const fadeOutLargeContentItem = gsap.timeline({}) // some timeline animations goes here that will make the inner content item for the features or about go to display: none and also fade out. // Basically from there what I would need to do is check if the wrapper is open first if it was open I would just proceed to check if there was a content item already in it (if its open typically there would be) then I would need to fade out the previous item e.g. if navigating from about dropdown to features without closing the menu fully. // If the wrapper wasnt open I would need to first trigger than timeline animation and wait for it to complete before firing the following animation. Is there any way for me to chain multiple timelines for example with a promise/await or setTimeout wrapped. function openNavMenu(menu: HTMLDivElement) { if(menu === null) return if(menu === aboutMenu) // do stuff related to about menu if(menu === learnMenu) // do stuff related to learn/resources menu if(menu === featuresMenu) // do stuff related to features menu (e.g. checks related to wrapper and current content then trigger respective timelines. } function closeNavMenu(menu: HTMLDivElement) { // to close a specific menu e.g. close features before opening the about menu } function closeAllMenus() { // to close all menus e.g. when resizing to mobile or clicking outside the main area }

Hi I built a dropdown navigation menu with gsap you can see a live example here https://sample.blinkpayment.co.uk/blink-learning-podcasts/blink-payment-insights-the-impact-of-contactless-payments-on-businesses Sometimes bugs can be created either randomly or by rapidly hovering over multiple dropdowns in quick succession. What are some ways I could make this code more reliable and better manage state for all of my animations. My codebase is vanilla with typescript. Live example https://sample.blinkpayment.co.uk/blink-learning-podcasts/blink-payment-insights-the-impact-of-contactless-payments-on-businesses Gist example of gsap menu code https://gist.github.com/samducker/3a1debb3a5816addddf76d3e6341927b Video of issues https://share.cleanshot.com/GJb8CW52