jackkemm

Hi there, I am playing around with an animation for a menu takeover and was wondering about responsive function based values in a timeline? I am trying to update values being passed to a timeline based on the browser size when a user resizes their browser. I have seen this but can't see it working with media queries/dynamic values: I have tried this using a window.matchMedia within the function but understandably from what I have read elsewhere, GSAP stores the initial value on the first run for performance? There are two other options I tried... updating a variable on resize and doing x: () => movement to get the new value, or updating a CSS custom property on resize and trying to use that too, none of which work. The values are expected to change when the user resizes the browser be it when the timeline is at the beginning or end so ideally I need to be able to update these dynamically. I have set up a basic Codepen of something similar to the route I am going down. I was wondering if there's a simple way to update these values? Scroll trigger has invalidate on refresh, I was thinking there may be something similar for timelines? Any help on this would be amazing! Thanks, Jack

Hi both, Thanks for the replies! Hi @Rodrigo, in regards to normalizeScroll, I have tested on Codepen numerous times with minimal set ups and it all works fine. However, in a site I am buildig it does tend to lag noticeably on mobile, and the main feature I am after, stopping the address bar from shrinking isn't always consistent, but as I've seen in previous forums, using normalizeScroll isn't the answer for everyone! Hi @GreenSock, yes 100% does clarify thank you! I plan to keep testing on future projects and hopefully get it working more consistently on mobile devices! Thanks, Jack

Hi there, I am wondering if there's a way to make ScrollSmoother work with the iOS Safari resize trick here https://greensock.com/docs/v3/HelperFunctions#scrollResize I noticed ScrollSmoother adds a height to the body which is how the scrolling works I assume? But in my case I am wanting to change the scrolling window to be a custom div on mobile to prevent the browser resize from occuring. I have tried normalizeScroll but it's not so performant for our use case so was want to do the old school way. In something like Lenis, you can decide the wrapper which has the overflow so it's pretty simple to choose what the target div is to scroll on. In the attached Codepen, I have it set up to use the custom div by default, but in practise I will be using ScrollTrigger.isTouch to be able to use work out whether it is a touch device or not to use the default set up or the custom div set up. If anyone can shed some light on this it would be much appreciated. Thanks in advance. Jack

Hi @GreenSock, Thanks for looking at that so quickly! Can confirm that has made it 10 times bettere thank you ? I will drop the temporary fix in for now. How often do you update the packages? Thanks, Jack

Hi there, is there any way to hide height jump when the accordion opens/closes? One of our clients has accordions at the bottom of a page and if you're right at the bottom and open/close the accordion, the height resize is very obvious and doesn't look too appealing. I looked at the Codepen above and it is a good example of what happens if you're at the bottom. Thanks in advance Jack

Me again... Did some more digging and turns out setting pinType: 'fixed' in my use case done the trick ? Found it here So smooth now! Thanks, Jack

Hi there, Looking to restart this as I have gone for alternative solution and almost there, I think it's just a scroll syncing issue. I have opted to use Lenis for the smooth scrolling now due to us having many accordions on the site, the height being added to the body is causing unwanted jumping on open close. I have also now opted to prevent the address bar on mobile devices from shrinking by using this helper https://greensock.com/docs/v3/HelperFunctions#scrollResize - in our case the normalizeScroll feature just wasn't working for us. Because I am doing the above, I need to pass a .scroller to the ScrollTrigger's I am creating which is the main #viewport, and then need to pass the wrapper and its content to Lenis. I have followed the docs and seen numerous examples, desktop works as expected, no jumping. Checking on mobile, the pinned sections and their text are jumping all over and wondering if there's a syncing issue I may have missed? I can also confirm if I don't try to prevent the address bar from hiding it works fine, but I am back to square one with the mobile issue. Here is the jittery example with mobile address bar 'fix' & .scroller: https://codepen.io/jackkemm/pen/rNrPNVP Debug view for actual mobile testing: https://cdpn.io/pen/debug/rNrPNVP Here is the example without 'fix' and no .scroller: https://codepen.io/jackkemm/pen/mdjvdop Debug view for actual mobile testing: https://cdpn.io/pen/debug/mdjvdop Thanks in advance Jack

Hi Cassie, Fully understand that! It can be a massive pain to try combat I saw you guys mentioned it in the docs. I am doing numerous pinned sections, so the normalizeScroll and ignoreMobileResize were seemingly the answer as there is more shifiting without them due to the address bar resizing, but still not quite right. Thanks for looking into it. It happens that sometimes the normalizeScroll addition isn't always 100% perfect as the address bar may still shrink when it starts jittering. Thanks, Jack

Hi Rodrigo, Sadly that'sa not massively helped. I am still seeing jumping in the codepen, and in the website I am building. Just to note I am using the latest verion of GSAP in both too. Thanks, Jack

Hi Rodrigo, Thanks for the reply! Okay noted, so in theory either place should be fine. In the attached example I am doing it via ScrollTrigger and have commented the ScrollSmoother variation out. The Codepen is very stripped back, and it's not as obvious as on the full website I am building, but you can see slight jittering, which is much more obvious on the website I am buidling. https://codepen.io/jackkemm/pen/wvxmrMV I can mainly replicate when I scroll up and down a few times, it seems it can take some time for it to catch up. Not sure if this is an issue too, but in the example the markers are jumping around a lot too. In terms of devices, the main place I have found the biggest issue as I know it is the biggest pain, an iPhone (I am using a 12) using Safari ? The normalizeScroll and ignoreMobileResize features are a great idea so would love to use them! Thanks, Jack

Hi there, I am looking for a recomendation. In the docs, both normalizeScroll & ignoreMobileResize are mentioned for both ScrollTrigger and ScrollSmoother. I am using both on a site and was wondering where would be best to set them, for either ScrollTrigger or ScrollSmoother. I have tested in both scenarios and they seemingly work better in one than the other. There are cases when it's set on ScrollSmoother and the screen may jump a little, or in ScrollTrigger the address bar can still hide/show. Not sure if there's a best practise for this? Thanks in advance. Jack

Morning Rodrigo, What you sent worked like a charm. I tweaked it a little using a setTimeout in my project as there was still a slight jump, but the additions you made is making sure I get to the right positions before enabling/disabling the ScrollTrigger. Thanks again! Jack

Hi Rodrigo, Sorry about that, will remember for next time! Thanks for the solution. I will have a look and see what you've done and go from there. Will get back to you when i'm happy Thanks again! Jack

Hi Rodrigo, Was quicker than expected to set up https://codepen.io/jackkemm/pen/QWBKXEr/a12381251fdbd3eeb29dfa765dc04606 If you scroll down to the the blue panel and click the trigger button, I am creating the ScrollTrigger. There is then a close button which takes you back to the start and disables the ScrollTrigger (removing the pin spacer div etc). So everything seems to work fine on initial trigger, then if you scroll down when the ScrollTrigger is disabled after close and trigger it again, it scrolls back into place and then jumps slightly after the ScrollTrigger has been re-enabled. It looks fine if it's lined up perfectly when triggering, the issues seem to arise if the div is not aligned when triggering. My version on the site I am building jumps too but then scrolls back into place after, maybe because I am using ScrollSmoother here too - but this still gives a good understanding of the issue I am having. Hope this gives you a better understanding! Thanks, Jack

Hi Rodrigo, Thanks for the response. I will try and set up a simplified Codepen today to hopefully get a better understanding. I appreciate the idea there. If setting pinSpacing: false, how would I account for the scrolling space which pinSpacing cleverly fixes? Anyway, the above question may be answered when I get a Codepen set up. Please bare with and I will post the link in here! Thanks, Jack

Hi there, I am looking for an opinion on some ScrollTrigger functionality. I am creating a horizontal timeline which I don't want active until a user clicks on a button to make it active - this timeline could have many years and I only want it to work if a user interacts. The issue I am having is creating the ScrollTrigger on click, there is a layout shift (to be expected). There is a starting/intro panel where the button is which is 100vh/100vw and was going to clone this to act as an overlay until the ScrollTrigger has been created to hide the layout shift, but not sure this is a suitable solution. I tried pairing this with enable/disable, but on load the pinSpacing exists which isn't what I want when I need it to be disabled, but also the pin divs gets added/removed too which also causes another layout shift (again to be expected). Now I can go for the panel overlay route to hide the creating/shifting until it's ready, but I was wondering if having my scrollable content in a modal which only appears when the user clicks is a better solution. I see there is a .scroller property which may be handy, but not sure on the best way to use it in a modal for example. Are there any examples of how this can be implemented? Thanks in advance! Jack

Hi Rodrigo, Thanks for the reply. That was exactly what I was looking for! I have hard coded the ScrollTriggers refreshPriority for a page I have created myself, knowing the order and it worked like a dream. I will look at automating an ID for these to determine their order of priority. Thanks again, Jack

Hi there, I am hoping someone could help me. I am using ScrollTrigger to pin different blocks with their own ScrollTrigger's and animations. My issue is, on page load, the ScrollTrigger pins aren't where I expect them to be per block (some overlap, or wrong altogether). I found some forum info on ScrollTrigger.sort() and ScrollTrigger.refresh(). ScrollTrigger.refresh() works intermitently, and not sure how feasible ScrollTrigger.sort() is when not knowing what the order of ScrollTriggers need to be created in. Have no CodePen link as this is a general question about ScrollTrigger ordering when not knowing the order. Would love some thoughts on the above! Thanks in advance, Jack

Cassie strikes again! Thank you so much. I was kind of along the right lines ?‍♂️ To overcome the inline/overflow not working issue I just used a clip-path to hide the text, works like a charm! Thanks again. Jack

Hi there, I am trying to get an animation to work but struggling to get the timeline correct. I will be using SplitText to stagger words where a sentence is chunked up. So the first chunk would animate in word by word, then a slight delay, then the second chunk, and so on. I am able to animate each chunks opacity (this is just to know I can animate each section separately), but when trying to animate the SplitText i'm not sure how to get this to work. I have an Codepen attached and an example video of what i'm after. The second issue I'm finding is that SplitText breaks the chunks of text due to them being divs. I know it's for allowing overflow animations but wondering if there's a way to fix the lines breaking? Thanks in advance. Jack type-transition_Je0JyRCL.mp4

Hey Cassie, Managed to get it working in the end (codepen attached has been updated). Just played around with what I was clipping and finally got the effect I was after. Had to adjust the polygon values but stuck with just using a clip path. Thanks again for your help! Jack

I thought that might be the case, naturally to get it 'off canvas'. Thanks for stearing me in the right direction. I'll make sure to post when i've cracked it! ?

Wow okay thanks, that might be a better solution. I'll have a play around with some different value ?

Yes sorry, being very vague here... attached is a screen recording of the example. Screen Recording 2022-01-06 at 13.06.16.mp4 The blurry bit is what i'm after. Thanks, Jack

Hey Cassie, Thanks for the reply! Yes I have indeed. That got me started, but it's more how it moves from bottom left to top right. As if the container is shrinking. Don't know wether you've seen that sort of animation before? Like having a fixed background but not lol. Thanks, Jack