Jump to content
Search Community

Animating a bootstrap dropdown open

ChaBuku test
Moderator Tag

Recommended Posts

Hello! I am attempting to animate the height of an opening bootstrap dropdown. I can get the box to animate as expected, but there's some strange behavior with some of the items inside the box as it opens. 

 

Why are the items inside the box outside until it fully animates?

 

Can someone explain to me what is happening?

See the Pen mdOdBXJ by adbakke (@adbakke) on CodePen

Link to comment
Share on other sites

It looks like just a CSS issue. You've got #visible-menu set to height: 100% which only applies when there's a height defined on the parent (#nav-menu). So during the tween while there's a height specified, that fills up the whole height, pushing the #expanding-menu way down. 

 

Remove the height: 100% and then I'd probably set overflow: hidden on #nav-menu and it should look more like what you intended. None of this is related to GSAP :)

 

See the Pen 2a20907eb14c00d00c70f89a079d877b by GreenSock (@GreenSock) on CodePen

 

Happy tweening!

  • Like 2
Link to comment
Share on other sites

  • 6 months later...

Kind of a late response, but this is definitely a bootstrap problem, even v5. I think the issue is that bootstrap uses 3 separate classes for this function (.dropdown, .dropdown-menu and .dropdown-item), so animations that involve the height of the .dropdown class may not execute in sync with the display of .dropdown-items (animated or not). So the problem described above is that, if the .dropdown class height is animated, the .dropdown-item (menu items) appear "outside the box" until the .dropdown animation is complete.

 

Even the default bootstrap animations don't seem to work with .dropdown.

 

The only way I was able to get this to work (pre-gsap) was to fade the opacity on .dropdown, rather than animating the height, which minimizes the appearance that the .dropdown-items (menu items) are outside the box.

 

I'm just starting to look at replacing my  animate.css fades with gsap, so I may have some questions myself.

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