jackkemm

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