Slide in and out effect using GSAP

Question

I have a header section which contains a search icon. When this icon is clicked, I want my search bar to slide in from the top. When it's closed, I want it to slide back up.

Currently:

1. My search bar slides down on initial click, but when clicking "click me again", it doesn't slide back up.
2. Once you've clicked the icon twice, on the third instance, when trying to slide the menu in (which works on first click), it doesn't slide in, just appears

Demo:

$(function() {

  function slideDown(){
    var element = $(".header__searchBar");
    var tl = new TimelineLite();

    tl.to(element, 1, {
      top: 0,
      autoAlpha: 1
    });

/*     tl.from(element, 1, {
      top: "-100%",
      autoAlpha: 1
    }); */

  }

  $(".header__searchIcon").click(function() {
    $(".header__searchBar").toggleClass("active");
    slideDown();

  });


});

.header {
  position: relative;
  padding: 20px 0;
}
.header__searchIcon {
  position: relative;
  z-index: 99;
  cursor: pointer;
}
.header__searchBar {
  position: absolute;
  left: 0;
  top: -100%;
  width: 100%;
  height: 100%;
  color: white;
}
.header__searchBar.active {
  z-index: 10;
  background-color: #5F249F;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js" integrity="sha512-H6cPm97FAsgIKmlBA4s774vqoN24V5gSQL4yBTDOY2su2DeXZVhQPxFK4P6GPdnZqM9fg1G3cMv5wD7e6cFLZQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="header">

  <div class="container">
    <div class="row">
      <div class="col-2">
        LOGO
      </div>
      <div class="col-8">
        MENU
      </div>
      <div class="col-2">
        <div class="header__searchIcon">
          Click me
        </div>
      </div>
    </div>
  </div>

  <div class="header__searchBar">
    SEARCH FORM HERE
  </div>

</div>

Answer 1

I just had a play around and got it working:

https://codepen.io/ryanowalls/pen/bGozVpy

I think the main reason it looks like it isn't sliding back up is because the purple background colour is only set on your 'active' class. This means the search bar is turning white before it can be seen animating away.

CSS updates:

.header__searchBar {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-100%);
  width: 100%;
  height: 100%;
  color: white;
  background-color: #5F249F;
}

JavaScript updates:

$(function() {
  function toggleSearch(){
    var element = $(".header__searchBar");
    // check if search bar is open already
    var active = element.hasClass("active");
    
    if(active) {
      // close search bar
      gsap.to(element, {'transform': 'translateY(-100%)'});
    } else {
      // open search bar
      gsap.to(element, {'transform': 'translateY(0%)'});
    }

    $(".header__searchBar").toggleClass("active");
  }

  $(".header__searchIcon").click(function() {
    toggleSearch();
  });
});