samd
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by samd
-
-
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
Without scroll smoother sandbox
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 codehttps://gist.github.com/samducker/3a1debb3a5816addddf76d3e6341927b
Video of issues
Pinning and scroll smoother issues
in GSAP
Posted
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