borzik2h,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<style>
html,
body {
height: 100%;
}
body {
font-family: Arial;
margin: 0;
padding: 0;
}
.wrapper {
width: 50%;
margin: 1% auto;
}
.outer {
overflow: hidden;
}
.slideUI {
text-align: center;
border: 3px solid #ccc;
transform: translateX(-100%);
}
.button {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="wrapper">
<button class="button" onclick="slideUI(this.nextElementSibling.firstElementChild, 1000)">Toggle</button>
<div class="outer">
<div class="slideUI">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Vitae eveniet nesciunt suscipit consequuntur id rem, earum totam eos eligendi labore sit illo fuga cumque neque ipsa fugiat quae sunt omnis?</p>
</div>
</div>
</div>
<script>
let counter = 0;
let isAnimated = false;
function animate({
timing,
draw,
duration
}) {
let start = performance.now();
requestAnimationFrame(function doAnimation(time) {
let timeFraction = (time - start) / duration;
if (timeFraction > 1) timeFraction = 1;
let progress = timing(timeFraction);
draw(progress);
if (timeFraction < 1) {
requestAnimationFrame(doAnimation);
} else isAnimated = false;
});
}
function slideUI(elem, duration) {
if (isAnimated) return false;
isAnimated = true;
animate({
duration: duration,
timing(timeFraction) {
return timeFraction;
},
draw(progress) {
let t = counter % 2 ? (progress - 1) * 100 : -progress * 100;
elem.style.transform = `translateX(${t}%)`;
}
});
counter++;
}
</script>
</body>
</html>