this.$burger = this.$element.find('.header__burger');
this.$navBodyItems = this.$element.find(
'.header__popup-menu .col-lg-3.col-md-6.col-12',
);
const tl = gsap.timeline();
tl.fromTo(
this.$navBodyItems,
{ opacity: 0, y: -500 },
{ opacity: 1, y: 0, duration: 1 },
);
this.$burger.on('click', (event) => {
event.preventDefault();
if (tl.reversed()) {
tl.play();
} else {
tl.reverse();
}
});
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter