How to smooth transition?

JavaScript
1

Hello I was wondering how to get a smooth transition effect over my slider when I click my right and left buttons, I have been trying to achieve it using different methods without success.

CODEPEN

HTML

<div class="outer" id="content">
  <button class="lefty paddle" id="left-button"></button>
  <div class="inner" style="background:red"></div>
  <div class="inner" style="background:green"></div>
  <div class="inner" style="background:blue"></div>
  <div class="inner" style="background:yellow"></div>
  <div class="inner" style="background:red"></div>
  <div class="inner" style="background:orange"></div>
  <button class="righty paddle" id="right-button"></button>
</div>

CSS

.outer {
  display: flex;
  overflow-x: hidden;
  overflow-y: hidden;
}

.inner {
  flex: 0 0 25%;
  height: 100px;
  margin:10px;
}
.paddle {
  position: absolute;
  top: 50px;
  bottom: 0;
  width: 30px;
  height:20px;
}
.lefty {
  left: 0;
}
.righty{
  right: 0;
}

JS

var content = document.getElementById('content'),
    scrollStep = 200;

document.getElementById('right-button').addEventListener('click', function(e) {
  e.preventDefault();
  let sl = content.scrollLeft,
      cw = content.scrollWidth;
	
  if ((sl + scrollStep) >= cw) {
    content.scrollTo(cw, 0);
  } else {
    content.scrollTo((sl + scrollStep), 0);
  }
});

document.getElementById('left-button').addEventListener('click', function(e) {
  e.preventDefault();
  let sl = content.scrollLeft;
	
  if ((sl - scrollStep) <= 0) {
    content.scrollTo(0, 0);
  } else {
    content.scrollTo((sl - scrollStep), 0);
  }
});
1 Like
2

It depends on how you’re moving the slider. Most JS sliders use CSS transform property and change it dynamically with JS.

In your case, you’re just adjusting the scroll position and not using the transform.
So, you can set scroll-behavior: smooth; css property on your “.outer” element.

2 Likes
3

@codeca423, I checked your pen, if you follow @husseyexplores as mentioned above you will get it.

1 Like
4

thanks alot it was super handy