One of the features on my website is a small modal that smoothly slides in from the top of the page upon entering, and then slides back out again when clicked on. However, I am encountering an issue where I do not want the modal to completely disappear after it has been closed. Instead, I want to ensure that the bottom 32px of the modal remains visible at the top of the screen so that users can easily click on it again and make it slide back down. Additionally, the height of the modal changes dynamically based on the information being displayed.
To achieve this effect, I have defined two keyframes:
@keyframes slide-bottom {
0% {
top: -100%;
}
100% {
top: 50%;
transform: translateY(-50%);
}
}
@keyframes slide-top {
0% {
top: 50%;
transform: translateY(-50%);
}
100% {
top: -100%;
transform: translateY(32px);
}
}
I appreciate any help with this! Thank you!