pietM Posted August 10, 2020 Share Posted August 10, 2020 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. See the Pen PoNPYJx by euqio (@euqio) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 10, 2020 Share Posted August 10, 2020 Hey piet. Try putting each line inside of a container element, putting position: absolute on the parent, and having the default flow for the content inside of it. It'll make your job a lot easier Link to comment Share on other sites More sharing options...
pietM Posted August 10, 2020 Author Share Posted August 10, 2020 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! Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 10, 2020 Share Posted August 10, 2020 That's not quite what I meant. I meant something like: div.absolute quote1a quote1b div.absolute quote2a quote2b Link to comment Share on other sites More sharing options...
pietM Posted August 11, 2020 Author Share Posted August 11, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 11, 2020 Share Posted August 11, 2020 Do this then: div.absolute quote1a quote2a div.absolute quote1b quote2b This is an HTML/CSS question Link to comment Share on other sites More sharing options...
pietM Posted August 11, 2020 Author Share Posted August 11, 2020 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. Does that make more sense? Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 11, 2020 Share Posted August 11, 2020 8 minutes ago, pietM said: Does that make more sense? Sorry, no Set things up in the HTML + CSS like you want them to be. Then split the text and write the animation (not sure why you're using two timelines). Also not sure why you're using inline styles... Link to comment Share on other sites More sharing options...
pietM Posted August 11, 2020 Author Share Posted August 11, 2020 Haha, very well. Thanks for your help, Zach. I appreciate it! Link to comment Share on other sites More sharing options...
pietM Posted August 11, 2020 Author Share Posted August 11, 2020 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. Apologies for the inline styles. Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 11, 2020 Share Posted August 11, 2020 Are you wanting something like this? See the Pen RwaWVrx?editors=0010 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
pietM Posted August 11, 2020 Author Share Posted August 11, 2020 Yes. Thank you, Zach! The "gsap.getProperty(quote, "height")" is what I was looking for. This is a great help. Thank you!! Link to comment Share on other sites More sharing options...
pietM Posted August 11, 2020 Author Share Posted August 11, 2020 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! See the Pen WNwQzBj by euqio (@euqio) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 11, 2020 Share Posted August 11, 2020 It's being overwritten by the timeline. You should probably kill the timeline and recreate it on resize. Link to comment Share on other sites More sharing options...
pietM Posted August 11, 2020 Author Share Posted August 11, 2020 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") }); Link to comment Share on other sites More sharing options...
pietM Posted August 12, 2020 Author Share Posted August 12, 2020 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(); }); See the Pen WNwQzBj by euqio (@euqio) on CodePen Link to comment Share on other sites More sharing options...
pietM Posted August 12, 2020 Author Share Posted August 12, 2020 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(); }); See the Pen yLOYWme by euqio (@euqio) on CodePen 3 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now