Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by jackkemm

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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! 👍
  16. Wow okay thanks, that might be a better solution. I'll have a play around with some different value 🤔
  17. 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
  18. 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
  19. Hi there, I am hoping someone could offer some advice. I am creating an image reveal effect using polygon clip-paths but am running into an issue with the end path. The idea behind it is a green shape slides over to reveal a first blury (zoomed in version of the main image) image, then this blurry image uses a diagonal clip-path from the bottom left and sweeps to the top right to reveal main image behind. I guess my question is about the clip-path, as I can't for the life of me work out the intended values to essentially clip diagonally from the bottom left to the top right to hide the blurry image and show the main image. So the blurry image would stay in place, but be clipped from the bottom left gradually hiding it to the top right. Any help would be much appreciated, and any tips on how this could be improved would be well recieved too! Thanks in advance. Jack
  20. Hi Blake, Had a feeling it was to do with the way I was using the timeline but wasn't. That works perfectly. Thanks for the help! Jack
  21. Hi there, I am hoping someone can help with a draggable and timeline issue I am having. I have reached out previously, which worked in the most part, and the resize event listener does keep the timeline and draggable progress in sync: My new issue here is the timeline container and range needs to be responsive on resize due to the change in content and layout. I was wondering the best way to go about this. In my codepen attached you'll see I have added the timeline to the updateMapper function, but this causes the timeline to break and the range/draggable becomes unresponsive 😕. Any ideas would be welcome please. Ideally i'll have a way to update just the timelines y value on resize. I don't want to put the user back to the begginging on resize either as some of the timelines can be quite long. Thanks in advance Jack
  22. Sorry ignore me, I just minused the width of the scrubber and draggable handle from the height of the container and works a charm. Thank you for your help Cassie!
  23. Hey Cassie, Thanks for the quick response! I knew there'd be something in GSAP that would save the day. I can see now the timeline goes off the top of the screen, is there a way to stop the timeline when the draggable handle reaches the bottom? It doesn't seem to quite marry up? I am currently translating the y position of the container using its height, not sure if this is causing it to fly off. I will defo clean it up when I stick it back into the project thank you haha. Thanks, Jack
  24. Hi there, I am after some help with using a draggable range slider to control my timeline. It is all set up and moves the timeline, updating the progress, but the final value falls short of the end of the timeline. I have set a max-height for the main container to create a window, and am using the inner container height, minus the height of the scrubber and the height of the draggable handle to work out the progress, but the final progress doesn't reach 1. I will be flipping to the x axis on mobile, but for now cracking why the y axis won't reach 1 is my focus. Any help would be greatly appreciated! https://codepen.io/jackkemm/pen/RwVQaGG Thanks, Jack
  25. Hi Jack, Thanks for the guidance. Works like a charm! I have one more question I am hoping I can ask here too. I need to change direction for mobile to be on the x axis. Is it just a matter of killing the Draggable instance and re initialising it in the new direction? Thanks, Jack