pietM

Thanks for taking the time, @Rodrigo! This is very helpful and appreciated. I know about Draggable's built-in boosting, but was unclear about how to achieve this using the GSAP Observer. This is what I needed: // Increase the z-index value and apply it to the target element zIndex++; gsap.set(item, { zIndex }); Thank you!!

Hey everyone, Is there a simple way to boost z-index of active element with GSAP Observer? I thought I could achieve this will class shift and function. Any ideas are appreciated. Thank you! https://codepen.io/evryali/pen/XWQjWRY

Thank you, @mvaneijgen! I tried to bring the logic into the functions, but neglected to include your "onComplete" functions to halt animation. Thanks again! A huge help.

Hi everyone, I'm trying to adapt GSAP's Observer to trigger both "prev" and "next" click behaviors, but the "up" and "down" events don't match "click" events -- even when I set draggable to "false". Any thoughts? https://codepen.io/evryali/pen/NWmNdKj

Thank you @ryan_labar , @mvaneijgen and @PointC!! This probably isn't as elegant as the proposed solutions , but it came down to how to link the array to GSAP's shuffle utility. Thanks again for the speedy and useful feedback. Love this platform!! Here's my solution: https://codepen.io/evryali/pen/vYPxvzr/94e2c7952237f4236535cceabbc1a64a

Great. Thank you @mvaneijgen@ryan_labar!! Calling the function onComplete makes sense! But, is there a way to achieve the random re-set, etc. without the use of keyframes? Is there a reason NOT to use a timeline (If I wanted to add complexity to the animated sequence)? Thanks for your feedback and help!!

Hi all! I'm trying to run a timeline using gsap's toArray and random utilities. In the attached demo, I have a simple sequence that I would like to randomize and re-randomize on repeat. 2,5,7,8,9....etc. repeat 3,8,7,1,2...etc. I've reviewed the documentation and haven't been able to figure out how to implement gsap's random or shuffle utility to achieve this. As always, I appreciate any and all guidance.

Thank you! Your prompt response, as always, helped to fix the issue. Working pen enclosed. Thanks again! https://codepen.io/evryali/pen/WNKVvgm

Hi everyone! Not sure why the enclosed timeline doesn't reverse on click when I can revers w/ ScrollTrigger and "mouseleave" events? As always, any feedback is greatly appreciated. "Closer" / ".closer" class should do it.

Ah! Thank you for taking the time. This is perfect and so helpful! Thanks again.

Hi Everyone! I have a timeline that plays and reverses based on scroll direction. I also use a mouse enter/leave function to trigger/control the same timeline. When using ScrollSmoother the direction overrides the mouse enter/leave functions (the timeline won't play until the scroll is at rest, even when I trigger mouse enter/leave events). My question: Can I overwrite the scroll control to prioritize the "mouse enter/leave" functions? Thanks, as always.

This is great, @Cassie! Thank you!

Thank you @Cassie ! I'll work on it! For now, I realize I can reset with an "onRepeat" function, rather than "onComplete". Thinking way too much over here. Thanks again! M

Thanks, Jack! Okay, I have the splits sequenced (I think I was overthinking it), but now I'm trying to reset the heights to "0" after the master completes with an onComplete function. But it's not working. Have a look. https://codepen.io/evryali/pen/bGvRwyY Thank you!

Thanks for getting back! In the example, there are three discrete splitText animations sequenced by a master timeline. timeline 1: 1/3 timeline 2: 2/3 timeline 3: 3/3 2/3 replaces 1/3. 3/3 replaces 2/3. Then the whole timeline repeats. Rather than fading each animation out, I'd like to stack them: So, after 1/3 completes, the text block gets pushed up to make room for 2/3 and so on. Does that make sense??

Hi everyone! I'm trying to create a simple stacking, type-based animation, where 1/3 stacks on top of 2/3, measuring the respective height for each new section (see rendering) as it stacks. Thanks as always!

@OSUblake Switching the order in my header.php(s) worked for me! Great updates! Thanks for all!

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!

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

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!

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

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.

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

Thanks @OSUblake !

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!