Jump to content
Search Community

Accordion functionality not setting the correct height

amitr95 test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

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

 

 

Tj3mdQ2.png

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

@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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

@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: 

 

Link to comment
Share on other sites

  • Solution

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

 

  • Like 4
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...