Accordion functionality not setting the correct height

[amitr95 0 Likes (Newbie)]

In the demo, you will see an accordion which is showcasing 2 issues:

 

1. When you click on "question 1", you will see that it shows all of the content (nothing is cut off). If you then click on "question 2", part of the answer is being cut off (see image below for context). Upon inspecting the code, it looks like it is setting a height lower than the content, unsure why?
2. When you first open any accordion, it gives an unwanted "blink" effect. This only happens on first click of an accordion

 

 

See the Pen bGjQVWO?editors=1010 by amit_rai95 (@amit_rai95) on CodePen

[Rodrigo 5,068 Likes (Superhero)]

Hi,

 

The issue with the missing section at the bottom is more related with the paddings and how the height is being set.

 

The flash in the animation is due to the fact that you have this in your elements:

.accordionCard{
  transition: all .5s;

  &__question{
    transiton: all .5;
  }
}

This basically means that both CSS and GSAP are fighting for animating the same properties, so as soon as GSAP applies some styles to the element CSS starts animating that particular change. See the issue? It's a really bad practice to use transition all in your css. Is better to set a specific property and be sure that it doesn't collide with something being animated by GSAP.

 

Finally I think is better to use Flip for this type of scenarios:

See the Pen RwBqKvB by GreenSock (@GreenSock) on CodePen

 

If you want the Back out easing you'll have to tinker with the code in order to create a Flip instance for each animation, but I just wanted to illustrate how easy it is to do this with Flip.

 

Happy Tweening!

[amitr95 0 Likes (Newbie)]

Hi @Rodrigo,

 

Many thanks for the demo with `Flip`.

 

Regarding your first point, where content is being cut off due to "paddings and how the height", in the `Flip` demo, I can see the height is still being set with padding, but it doesn't cut off in that demo. Why is this?

 

Are you suggesting with my approach, I should look to remove padding altogether?

[Rodrigo 5,068 Likes (Superhero)]

16 minutes ago, amitr95 said:

I can see the height is still being set with padding, but it doesn't cut off in that demo. Why is this?

I think it could be related to the calculations being made in order to set the new height. I think the best approach (if you don't want to use the Flip approach) would be to wrap everything that has padding and margin inside an element that doesn't and animate that element's height. That element of course should be the one with overflow hidden.

 

Hopefully this clear things up.

Happy Tweening!

[amitr95 0 Likes (Newbie)]

@Rodrigo

 

I followed your approach and created a child element which housed the expandable content, however it yielded the same results.

 

I then stripped it back to test if padding and margin was in fact the issue, by commenting out anything padding and margin related, however the issue still persists. I can't see what else would cause miscalculations besides padding, other than the JS?

 

See demo here: 

See the Pen dyjwjMM by amit_rai95 (@amit_rai95) on CodePen

[Rodrigo 5,068 Likes (Superhero)]

I can only think of two possibilities:

1. The margin of the <p> tags and the collapsing margins  in the box model spec: https://www.w3.org/TR/CSS2/box.html#collapsing-margins
2. By the time the from instance is instantiated the height of the element is not it's natural height, maybe set a timeout in order to wait for a few ms (at least 20 so is more than 1 tick from GSAP).

Happy Tweening!

[amitr95 0 Likes (Newbie)]

@Rodrigo

 

Are you suggesting something along the lines of:

 

function openCurrent(){
  TweenMax.from(answer, 0.5, {
    height: 0,
    immediateRender: false,
    ease: Back.easeOut
  });
  console.log("click");
}

TweenMax.delayedCall(0.5, openCurrent);

?

 

Demo updated to showcase it effect: 

 

See the Pen bGjQVWO?editors=1010 by amit_rai95 (@amit_rai95) on CodePen

[akapowl 5,134 Likes (Superhero)]

Hello @amitr95

 

12 hours ago, amitr95 said:

I followed your approach and created a child element which housed the expandable content, however it yielded the same results.

 

I then stripped it back to test if padding and margin was in fact the issue, by commenting out anything padding and margin related, however the issue still persists. I can't see what else would cause miscalculations besides padding, other than the JS?

 

I think the problems you are having might just be related to the general processing of the code's logic you run inside your function, and not really to GSAP measuring the height incorrectly.

 

Here is an approach, that is a bit different on the logic side of things, which works fine for me with regard to the height. I also added overwrite: 'auto' to the tweens, so GSAP can sort out conflicting tweens that might be created along the way.

 

[Note: this approach is not meant to be 100% bullet-proof. It is mainly to show, that the height gets tweened to the proper value.]

 

See the Pen VwBqJmj by akapowl (@akapowl) on CodePen

 

 

 

Edit:

Since getting the logic right for something like this can become a bit tricky, here's another example of your setup, using an approach by OSUBlake - which works a lot better. Hope that will help.

 

See the Pen BaPvXQM by akapowl (@akapowl) on CodePen

 

 

 

Based on this demo.

 

See the Pen JYQqZr by osublake (@osublake) on CodePen