Jump to content
Search Community

what behavior should I expect? (width animation hop)

biljohns test
Moderator Tag

Recommended Posts

Hello all,

I am new to GSAP and am trying to understand what goes on under the hood.

 

How to reproduce the issue:

1. Click the "Reduce Container" button.

2. Click the "Toggle LeftPane / Reverse Animation" button.

Upon click the "Toggle LeftPane / Reverse Animation" button, you see a noticeable hop in the animation.

Why is this?

 

Expected results:

After clicking the "Toggle LeftPane / Reverse Animation" button and reducing the left pane down to 200px, reversing the animation should bring the left and right pane split back to a 50/50 (100% width to both panes).

Why is this not the case?

See the Pen dyoYXym by biljohns (@biljohns) on CodePen

Link to comment
Share on other sites

First of all, welcome to the forums, @biljohns!

 

That has nothing to do with GSAP actually - it's how Flexbox works. 

 

Solution: set flex-shrink: 0 and flex-grow: 0 on the left pane, and flex-grow: 1 on the right pane. 

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

 

Just to be clear, GSAP was getting the current width from the browser and animating from there, but due to the way Flexbox works, it throws off the width. So even if you totally take GSAP out of the equation, you can do this: 

 

const leftPane = document.getElementById('leftPane');
const computedStyle = window.getComputedStyle(leftPane);

console.log("width is:", computedStyle.width);

setTimeout(function() {
	leftPane.style.width = computedStyle.width; // watch it jump!
}, 1000);

Notice we're setting it to exactly the correct width...but inside Flexbox that'll end up altering it based on the other contents of the container and their ratios. 

 

Does that clear things up? 

  • Like 2
Link to comment
Share on other sites

Hi Jack,

Thank you for the speedy response.

 

I see you also moved both panes from 100% > 50%.

After further tinkering, I see that was also throwing the animation off.

 

I did some quick reading to fill the flexbox knowledge gap. 

I know this is a GSAP specific forum, but for clarification...

 

1. Since there are only 2 flex items in this flex container and flex-grow defaults to 0; set rightPane "flex-grow: 1;" (or any number above 0 - only 2 flex items) so rightPane takes priority and covers the rest of the container when leftPane width changes/shrinks?

 

2. Since items will never overflow the parent container div (we have a 50/50 split), is it necessary to set leftPane "flex-shrink: 0;"?

I ask because it works just fine without setting it but do wonder if there is a reason for setting it in this case that would be beneficial.

 

Link to comment
Share on other sites

22 minutes ago, biljohns said:

Since there are only 2 flex items in this flex container and flex-grow defaults to 0; set rightPane "flex-grow: 1;" (or any number above 0 - only 2 flex items) so rightPane takes priority and covers the rest of the container when leftPane width changes/shrinks?

Correct.

 

22 minutes ago, biljohns said:

2. Since items will never overflow the parent container div (we have a 50/50 split), is it necessary to set leftPane "flex-shrink: 0;"?

I ask because it works just fine without setting it but do wonder if there is a reason for setting it in this case that would be beneficial.

I think you can leave it out without issue.

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