pietM

You're the best. Let me know. Thanks @Cassie!

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.

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!

Brilliant! Thanks Jack and @OSUblake. Super helpful and appreciated, as always. Thanks again!

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

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

Following up on this thread almost a year later! Can someone point me to where I can changed the enclosed pen to wrap / loop after reaching the final cell? https://codepen.io/akapowl/pen/09db336c318403519bf48ccd459d3b94 All help appreciated, as always. M

Hi everyone, I have a simple nested accordion almost behaving as planned. My question is how to achieve the "slide up" animation. Because the class is set to "display:none;" I understand that I won't see the animation as written, but is there an alternative way to handle the class with GSAP to achieve the slide up animation? Any advice is greatly appreciated. Thanks for all!

Thanks, Jack. I removed the second timeline altogether, as you suggest. The code is much leaner now and functions perfectly. I will definitely adopt this approach moving forward. tl1.to(chars, { opacity: 0, duration:1, delay:1, ease: "expo.inOut", },2) Thanks again for taking the time to help out. All best, M

THANK YOU, Jack! Yes, the beta .js resolves the issue. Phew! As for the extra .to(), it's a very inelegant way to hold the characters at 1 opacity for whatever interval before transitioning out. For me, it makes sense to partition the before/after states into two timelines. Though, I'm sure there is a better, more efficient way to achieve this. Again, thanks for getting back. I really appreciate GSAP and its community.

Still struggling with this. How can the same code produce different behaviors between the two versions? Thanks for all! M

Hi everyone, Having a weird issue with a simple animation with GSAP 3.6.1. When the animation repeats, the timeline breaks and the text blinks, etc. Using the same code (with GSAP 3.5.1), there is no issue. GSAP 3.5.1 version: https://codepen.io/evryali/pen/OJWbVEr I don't get the discrepancy. What am I missing? I appreciate any help, as always. GSAP 3.6.1 version:

Hi everyone, I've reviewed examples from the forum on how to achieve a simple vertical accordion. But, I can't get the heights to reset once I adjust the window dimensions. I know I have to recalculate the heights and reinitiate the animation function, but it keeps breaking. I appreciate your help. M

Thank you, @PointC! I repeated the beep to extend the track duration. Not trying to sync that Not sure why I was struggling so much with this. But your feedback helped to solve my issue. I will be sure to load the audio before initiating animations for my projects. Thanks again for the help! Here's the working pen: https://codepen.io/evryali/pen/rNWRMXp M

Thanks for the responses! Sorry for not being more clear. I want the SVG animation to sync with the duration of the track (pulling from an <audio> tag), but when I use the track duration: var wholelength = track.duration; for the tween duration: var Tween2 = gsap.to("#target1", { paused: true, repeat:-1, duration:wholelength, ease:"none", drawSVG: "0% 100%", repeatDelay:.25 }) It doesn't work. Basically, I want the the duration for the tween and .mp3 length to match. Here's a more reduced pen: https://codepen.io/evryali/pen/rNWRMXp

Thanks Jack! Here's a reduced pen, with just the GSAP animation. I thought the timer would helpful to measure the sync between the tween duration and the audio's duration. https://codepen.io/evryali/pen/rNWRMXp Thanks again, M

Hi everyone, Attempting to set the duration for a simple DrawSVG loop, but the duration isn't syncing correctly. Here's a vid of the problem: Untitled.mov Any help is much appreciated. Thanks for all, M

Finally following up here. Your feedback put me on the right path. Thank you! Though this isn't entirely GSAP-related and more a swup issue, it was helpful to learn why one needs to kill the ScrollTrigger events and destroy / update the LocomotiveScroll while transitioning between pages. In the end, updating / destroying the triggers + the scroller with swup events solved my problem: document.addEventListener('swup:transitionEnd', (event) => { locoScroll.update(); }); document.addEventListener('swup:willReplaceContent', (event) => { ScrollTrigger.getAll().forEach(t => t.kill()); locoScroll.destroy(); animation }); Hope this helps anyone dealing with the same issue. Thanks again for all the help. M

Following up here, as I still can't figure out why the width doesn't refresh on page load. I have enclosed a vid with a live example to better illustrate the issue. The scrollTrigger progress appears in the upper right corner. Am I not "killing" / "destroying" the scrollTrigger instance correctly? My pen is above. Thanks for all, M Untitled.mp4

Thanks for reviewing, Zach. That's right. On initial load, all works well. On page load, I lose the trigger width only. Everything else works perfectly. Thanks again.

Hi everyone! Like some on this forum, I use swup for site pagination. I reset scripts with wrapping functions and an EventListener when content is replaced: ex: smoothscroll(); document.addEventListener('swup:contentReplaced', smoothscroll); This is a great way to re-initiate / replace all of my GSAP timelines after page transitions complete. But, for some reason, I can't get the the "x" width (below) for the enclosed pin to reset once I've transitioned to a new page. Everything else works: The scroll, the animations, the pin, etc. Just missing the width! x:() => -(maxWidth - window.innerWidth), end:() => maxWidth - document.documentElement.clientWidth + port.offsetWidth As always, any advice greatly appreciated. Thanks!

Beauty. Thanks for the prompt help today, Paul! Hopefully these demos will help others as well. Have a nice weekend!

Hi again. One last question for this thread. Is there a way to adopt the width from a parent div rather than the window innerWidth to establish the slide's width? I thought I could do this by utilizing GSAP's "getProperty" function, but that doesn't seem to work. let masterwidth = gsap.getProperty(master.querySelector(".panelWrap"), "width"); Instead of let iw = window.innerWidth; Otherwise, the slides bisect when aligned. https://codepen.io/euqio/pen/wvzvLxW Any thoughts are appreciated!

Brilliant. Thanks for this, Paul! This is exactly what I needed. - I try not to lean too hard on the community for help. But help like this is what makes this such a great platform. Thanks again! M

Hi again. I've reconfigured the demo to better illustrate the issue. There are two slider instances (SLIDER 1 and SLIDER 2). Everything works great. However, the nav dot for the "activeSlide" only works for the SLIDER 1 instance. The dot controls work fine for each, but the nav dot animation (from white to green) only works in the first instance. Have a look and let me know if the issue I'm describing is clear. Would appreciate any help here. Thank you! https://codepen.io/euqio/pen/jOMOeNJ