pietM

Thanks, Jack! There were some major, basic mistakes in my CSS. But, as a follow up I do have a specific GSAP-related question. I am trying to change the dot behavior for each discrete slider instance. I think it's line: let newDot = document.createElement("div"); newDot.className = "dot"; But when I switch out "document" for "master" or "this," it still doesn't work. Am I on the right track? https://codepen.io/euqio/pen/rNMNmMe

Happy Thanksgiving, everyone! I'm attempting to stack the enclosed sliders (adapted from @PointC's brilliant demo). I've modified the GSAP to account for the classes and placed the absolute elements into relative sections. What am I missing here? Disabling the wheel action still doesn't allow me to scroll to the lower section. Wishing the community a restful holiday, M

Beautiful. Thanks, Zach!

Hoping this is a quick fix. I've looked over the forums and implemented (allowNativeTouchScrolling: true) for GSAP's boilerplate slider, but it still interrupts the vertical scroll. I'd just like to glide over it, like any image, etc. Appreciate any help here: Thanks for all.

Thanks, Zach. That set me on the right path. Not entirely a matchmedia / media query solution, but this fixed the mobile issue for me: let cachedWidth = $(window).width(); $(window).resize(function(){ var newWidth = $(window).width(); if(newWidth !== cachedWidth){ if(anim) anim.play(0); totalDistance = $(ticker).width() / 2; anim = gsap.to(ticker, { duration: dur, x: -totalDistance, ease: "none", repeat: -1, overwrite: true }); cachedWidth = newWidth; } }); Probably not the most elegant fix, but happy the timelines are preserved on scroll without resetting. Reposting if it helps anyone. https://codepen.io/euqio/pen/RwaKmOw

Following up on this thread with a quick question. I've noticed on mobile that scrolling down resets the animation (calls the window resize function, playing the timeline from zero). Is there a way to avoid this, so the animations play without resetting on scroll?

Got it! Here's the final animation, if it helps anyone. I used .revert(); to reset the split. $(window).resize(function(){ master.kill(); master = gsap.timeline({repeat: -1, repeatRefresh:true}); gsap.utils.toArray(".quotes").forEach((quote) => { quote.split.revert();}); sequence(); }); https://codepen.io/euqio/pen/yLOYWme

Got it! I created a function that reinitiates on window resize. Now, I just need to reset the SplitText. Thanks for the help, Zach! $(window).resize(function(){ master.kill(); master = gsap.timeline({repeat: -1, repeatRefresh:true}); sequence(); }); https://codepen.io/euqio/pen/WNwQzBj

Thanks for the prompt feedback, Zach. Like this? I read over the enclosed article, focusing on tip #8: https://css-tricks.com/tips-for-writing-animation-code-efficiently/ But still not getting the logic right. Thanks for the help. $(window).on("resize", function() { tl.kill(); const new_tl = gsap.timeline(); new_tl.to(".move", { y: gsap.getProperty(quote, "height"), ease: "expo.inOut", duration:2 }) new_tl.fromTo(quote, { opacity:0, }, { opacity: 1, duration: .5, ease: "expo.inOut", }) .to(quote, { opacity: 0, duration:.5, }, "+=2") });

Hi again, $(window).on("resize", function() { gsap.to(".move", {y: gsap.getProperty(quote, "height"), ease: "expo.inOut", duration:1}); }); Is there a reason why the "y" value doesn't set on resize? Thanks for all! https://codepen.io/euqio/pen/WNwQzBj

Yes. Thank you, Zach! The "gsap.getProperty(quote, "height")" is what I was looking for. This is a great help. Thank you!!

Okay. Here's a last attempt to convey the issue I'm trying to solve. Is there a way to dynamically push the relative position of the red container with the relative height of the "quote" timeline. https://codepen.io/euqio/pen/PoNPYJx Apologies for the inline styles.

Haha, very well. Thanks for your help, Zach. I appreciate it!

Not entirely. It's two independent timelines ('quotes" AND "impressions"), each with their own duration and with their own container running simultaneously. Here, they are spaced, but I'd like them to stack. https://codepen.io/euqio/pen/PoNPYJx Does that make more sense?

Sorry for the protraction here, Zach. It's still not working. Maybe I'm not explaining the issue correctly. Is it possible to get the absolute divs to stack with the variable heights of the different quotes? 1A | 1B 2A | 2B https://codepen.io/euqio/pen/PoNPYJx

Thank you, Zach! Taking that approach does not keep the sections stacked, though. Now, there's a gap between the 1A / 1B elements. What am I doing wrong here? Thanks again! https://codepen.io/euqio/pen/PoNPYJx

Hi everyone! I have two, type-based timelines running simultaneously. Because sentence length varies and the position of the animation is absolute, I'm trying to figure out how to format the animations so they adapt to their changing heights (stacked, one under the other). I've tried using various css options without success. Any ideas on how to set auto heights dynamically? I appreciate any help here.

Noticed this too.

Thanks for getting back, Zach. I note the difference above. One is a scrollTrigger / scroll-activated horizontal scroll, the other is an infinite auto-slider. My question relates specifically to GSAP's auto-slider (https://codepen.io/GreenSock/pen/GRJwLNP) and how to calculate wrapper width with slides of varying / dynamic widths. In the the pen I submitted, the slider doesn't calculate the variable slide widths without breaking. You can see the issue in slide 2 of the submitted pen. Does that make sense? Thanks again!

Hi everyone, Attempting to set dynamic widths for GSAP's boilerplate auto-slider. Searching though the forums, Jack offered up a beautiful scrollTrigger implementation: https://codepen.io/GreenSock/pen/b375e7e4071b7ae285777cda4fd08f76 but I'd like to preserve the draggable functionality here. As always, appreciate any help here.

Thanks again for the follow up and continued assistance here, Zach! This really is a huge help. I really appreciate it and hope it helps others too. Okay, no more questions from me. This is exactly what I need. Thanks again, M

Thanks again, Zach. Hopefully my last GSAP-specific question for the thread: https://codepen.io/euqio/pen/NWxMdpW I have a play(0); set on resize and just need to reset the totalDistance and clone. I've tried restating the animation and 'totalDistance' var, but the clone doesn't repeat on resize. After tinkering for hours, I still don't know what I'm missing here. Thanks again. M

Awesome. Thanks again for following up, Zach! I added the enclosed listener function, but when I resize the browser, the marquee accelerates its duration (but maintains the width!). - - window.addEventListener("resize", setPosition); setPosition(); - - https://codepen.io/euqio/pen/NWxMdpW

Thanks for getting back, Zach. I really appreciate it. Unfortunately, no. I deleted the updated pen after tinkering without any luck. I've reproduced it here: https://codepen.io/euqio/pen/NWxMdpW And would love to receive any help here. Thanks again for following up!

Thanks, Jack! This is exactly what I was hoping to achieve. Thanks for taking the time. Is there a way to link to the new beta version of ScrollTrigger to test with more ScrollTrigger(ing)? I've learned so much from the support here and love GSAP. Thanks for all!