jackkemm

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

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

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

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

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!

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

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

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

Hi I'm hoping someone can help. I have got this range slider working with the help of Blake on a previous post, but have one more thing to do before it's complete. The range slider is using inerpolate and clamp and I am setting the initial values using the progress value with interpolate. I am allowing the user to add in a value to a number input on the left, and am wanting the slider knob to adjust accordingly. Is there a way to translate that in to a progress value or pass the value directly? Thanks in advance. Jack

Morning Blake, Sorry, noted for next time I have a question. But wow that is very stripped back now. A good starting point for me thank you! Thanks, Jack

Hi there, I am hoping someone can help me here. I am looking to see how simple this would be to flip on the y axis? I have tried changing some of the values and the styles so the range works vertically but not having any luck. I have a codepen which I am working on currently if that helps. Would love some pointers on how to get this working https://codepen.io/jackkemm/pen/bGWdgRY I know it's using old GSAP too, but for now it is just a direct copy of the example above. Thanks in advance for any help. Jack