CSS Smooth animation

General Questions
1

Can anyone suggest a really efficient way to do this fade and slide in as it seems to be glitchy (and I’m seeking perfection). CSS only perhaps?

Screenshot 2023-01-27 at 5.00.03 pm
Screenshot 2023-01-27 at 5.00.03 pm973×590 49.4 KB

2

@excede cute cats :slight_smile: Animation is smooth on my iPhone SE, 8 years old Mac Pro and of course M1 Mac. Where are you getting glitches? One way to optimize would be to use a smaller or responsive image.

3

Glitchy for me because you are updating the src value on the img as well as animating. I’d start by not doing that and having separate images inside a ‘slider’ div.

I’d then create a simple slider with javascript that adds an active class to an index on a setInterval. You’ve probably got the basic code but something like…

const images = document.querySelectorAll('.silder images');
let index = 0;

setInterval(() => {
  images.forEach((img, i) => img.classList.toggle('active-slide', index === i)) ;

  index++

  if (index >= images.length - 1) {
    index = 0
  }
}, 3000)

.slider img { 
  transform: translateX(-10px);
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
}

.slider img.active-slide {
  transform: translateX(0);
  opacity: 1;
}

This code is just off the top of my head btw so It might be a starting point but don’t expect it to work.

3 Likes