Bootstrap dropdowns

[dexterca]

I'm new to gsap and I'm trying to animate Bootstrap dropdowns, but my results have been buggy in all browsers.

 

The tweens seem to get stuck or stop. Sometimes it works perfectly, then others not. I've also noticed double clicking seems to break the tweens.

 

Example of when the tweens break
 

 

See the Pen dNwLwP by dexterca (@dexterca) on CodePen

[PointC]

Hi dexterca 

 

Welcome to the forum.

 

I'd recommend creating your dropdown timeline in advance and play/reverse it on click. As you have it now, you're creating a new timeline on each click and that can result in tweens getting overwritten and breaking the animation. (which you've seen) Please try this: 

var tl = new TimelineMax({paused:true, reversed:true});
tl.from('.dropdown-menu', .25, {height: 0, ease: Power2.easeOut, opacity: 0})
tl.staggerFrom('.dropdown-menu > li', .2, {y: -20, opacity: 0}, .015);

$('#dropdown-toggle-1').on('click', function () {
   tl.reversed() ? tl.play() : tl.reverse() 
});

I don't know anything about Bootstrap, but I see a whole bunch of transforms in the CSS. I can't be sure the Bootstrap CSS animations won't conflict with GSAP animations, but the above code should get you started.

 

Happy tweening.