Jump to content

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


  • Posts

  • Joined

  • Last visited


About pietM

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

pietM's Achievements

  1. @OSUblake Switching the order in my header.php(s) worked for me! Great updates! Thanks for all!
  2. Awesome. So helpful. Thank you @Cassie! I don't have much experience w/ .invalidate(), but seems extremely useful. (I know re:circ, 'cerc' reminds me of autechre?!?) Thanks again!
  3. HI everyone, Likely a common question, but I can't find a clear solution after searching the forums. I have elements in a div that distribute by flex after a "mouseenter" event. The widths are set to "auto," so they shift once the browser dimensions change. I think I need to add a "resize" listener: window.addEventListener("resize", () => {}) and collect the new widths with gsap.getPropoerty() after "resize" and tl.kill()? But when I try this approach it doesn't work. Appreciate the help and feedback. M
  4. Hi again @warkentien2 I was able to work to a solution with GSAP's horizontalLoop() helper. https://codepen.io/GreenSock/pen/PojYwPp Thanks again for your help!
  5. Thanks @warkentien2 ! I'm familiar with all the slider libraries. Thanks! How about adding an autoplay function to this one? You can click the left / right side of viewport to advance the slider. https://codepen.io/evryali/pen/poWXbdQ
  6. Thanks for taking a look @warkentien2! I really appreciate. The container can remain at 100vw, but I want individual slides to have "auto" widths. Because each slide is set with an "absolute" position, I can't get the flex to distribute the slides without compromises to the slider functionality. Does that make sense? Here's a non-GSAP example for reference. https://codepen.io/evryali/pen/0b47c43127aebcc42a7cd6a674a93882 Basically, I want to keep all of the functions in the GSAP slider in the first post, but apply it to a container with images of varying widths.
  7. Hi everyone! Happy to pay someone to assist me with the enclosed pen. I can offer $50/hr. My question is how to calculate the width of the slide container with slides of varying widths. Otherwise, the pen works as needed. Thanks for looking!! https://codepen.io/evryali/pen/rNGyPev
  8. Thank you @Cassie !! Unfortunately, I had to resort to the Intersection Observer API for the desired effect. Here's the code and updated pen, should anyone want to use it: const captiongrab = new window.IntersectionObserver(([entry]) => { if (entry.isIntersecting) { caption2.innerHTML = captioner.innerHTML; }}, { root: null, threshold: 0.1 }) captiongrab.observe(box); https://codepen.io/evryali/pen/rNGyPev - My next question is how to calculate the width of the slide container with slides of varying widths. Where can I reach out for paid assistance with this? Thanks for all!
  9. You're the best. Let me know. Thanks @Cassie!
  10. Thanks for getting back @Cassie! I want ".caption2" to pull html from each slide's ".caption3," so it updates as you drag. Kind of like an "active" or "is-selected" function. So, for slide 1, ".caption2" = 1. Caption1, for slide 2, ".caption2" = 2. Caption2, etc. as you drag or advance with the "prev / next" buttons. I added the onDragEnd call, but it still doesn't work.
  11. Hi everyone! I'm trying to fire a function: function activeCaption(){ caption2.innerHTML = captioner.innerHTML; } when the enclosed slider's updateProgress() and updateDraggable() fire, but the caption isn't updating. Any help is appreciated, as always. Thanks for taking a look!
  12. Brilliant! Thanks Jack and @OSUblake. Super helpful and appreciated, as always. Thanks again!
  13. Building from this idea, I wrote a horizontal loop with a ScrollTrigger pin. The loop on scroll down feels seamless but scroll up feels "stuck" because of the repeated section (1). Any thoughts? https://codepen.io/evryali/pen/PoJwvGZ
  14. pietM

    Stacking Slider

    Yep. This is great, @akapowl. Thank you! I can take it from here.