pietM

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!