Skip to content

Instantly share code, notes, and snippets.

@webarthur
Last active December 18, 2023 07:47
Show Gist options
  • Save webarthur/0fb22721264562c7aa74b07c7fe0f227 to your computer and use it in GitHub Desktop.
Save webarthur/0fb22721264562c7aa74b07c7fe0f227 to your computer and use it in GitHub Desktop.
Pure CSS slidedown / slideup animation using transform translateY
.slide-up, .slide-down {
overflow:hidden;
}
.slide-up > div, .slide-down > div {
transform: translateY(-100%);
transition: .4s ease-in-out;
}
.slide-down > div {
transform: translateY(0);
}
<div class="container" style="padding: 40px">
<button onclick="trigger()">Trigger Slideup/SlideDown</button>
<div id="Slider" class="slide-up">
<div>
<p class="contents">
Hello World Text
</p>
</div>
</div>
</div>
// slideup/slidedown
trigger = function () {
Slider.classList.toggle("slide-down")
//Slider.classList.toggle("slideup")
};
@dimzeta
Copy link

dimzeta commented Jul 27, 2020

Awesome, thank you :)

@jonrrivera
Copy link

v nice

@l-Aeden-l
Copy link

Where is the HTML ?

@linuxguist
Copy link

linuxguist commented Jul 30, 2023

@l-Aeden-l Please check the following codepen project for a complete demo: https://codepen.io/nathan-sr/pen/OJaadOj

The animation timing is currently set to 8 seconds on this project, which can be adjusted later on. Don't worry if you miss this instruction. Just re-load the page again.

@webarthur
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment