Animating to auto height while using grid display with media query breakpoints

[Sgt. Red Pepper]

Hello, after searching the forums I was unable to find any information about an issue I am experiencing by animating to height auto while using a grid display. 

 

In this scenario,  the grid has a breakpoint that will render its contents in either one or two columns, depending on the viewport width.

 

On initial load, the animation works fine, but when the breakpoint is crossed, the animation only recognizes the initial height when it animates to auto. This causes an unattractive jump to the correct size when the animation completes. 

 

Is there any way to force the timeline to refresh itself if the breakpoint gets crossed? 

 

I have provided a codepen link with a crude example of this issue. 

 

I would greatly appreciate any guidance that you could provide me with.  

 

Thanks. 

 

 

See the Pen WNWEwEp by gee_bee (@gee_bee) on CodePen

[GreenSock]

When an animation renders for the first time, it records the start/end values internally so that it can very quickly interpolate between them during the animation. You've created a scenario where you actually want to CHANGE those values on resize. invalidate() will do exactly that - it flushes any recorded start/end values so that on the next render of that animation, it'll re-calculate those. 

 

With that in mind, you can just invalidate the animation and restore its progress: 

window.addEventListener("resize", () => {
  let progress = tl.progress(); // remember the progress
  tl.progress(0).invalidate().progress(progress); // rewind to the beginning, invalidate to flush any recorded start/end values, then restore the progress
});

See the Pen BaEdQBy?editors=0110 by GreenSock (@GreenSock) on CodePen

 

Is that what you're looking for? 

 

You could also consider using a gsap.matchMedia(). There are many ways to accomplish something similar 🙂

[Sgt. Red Pepper]

Thanks for the help! Combined with a debouncer, this is exactly what I need. 

 

Just to clarify, this isn't a concern when animating percentages, such as 0% height to 100% height? The pixel value of an auto height is recorded for fast interpolation whereas a percentage based animations interpolate between the percentage values? 

 

 

[GreenSock]

3 minutes ago, Sgt. Red Pepper said:

Just to clarify, this isn't a concern when animating percentages, such as 0% height to 100% height? The pixel value of an auto height is recorded for fast interpolation whereas a percentage based animations interpolate between the percentage values? 

In general that's true, yes.