Jump to content
Search Community

Timeline Auto Height Issue

pietM test
Moderator Tag

Recommended Posts

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

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

 

 

Screen Shot 2020-08-10 at 8.53.47 PM.png

Screen Shot 2020-08-10 at 8.53.51 PM.png

Link to comment
Share on other sites

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

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. 

 

Screen Shot 2020-08-11 at 12.07.21 AM.png

Screen Shot 2020-08-11 at 12.07.25 AM.png

Link to comment
Share on other sites

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

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

  • Like 3
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...