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:
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>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();
});
});