pietM

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

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.inO

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.