Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

jackkemm's Achievements

  1. 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
  2. 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
  3. 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!
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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