How to trigger css translate animation with javascript

Question

I am trying to create a manual slideshow which animates a translation of four images left or right depending on which button is pressed uncovering four new ones and hiding the old. All of the logic works except that I can't figure out how to animate the transition. I have tried various things in my javascript file such as album_covers[n].style.transition = "translate 1.0s linear 0s"; (as you will see in the below code 'album_covers' is an array consisting of all images selected by the class of 'album-cover' from the html). I'm not sure if the way I am trying to do things is possible or if I will have to resort to another technique such as keyframes. Any insights for a CSS/Javascript newb?

HTML

<html>
  <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">    
  </head>
  <body>
    <div class="image-container">
      <img class = "album-cover" src="https://images.8tracks.com/cover/i/008/786/475/cover-2153.png?rect=0,0,500,500&q=98&fm=jpg&fit=max">
      <img class = "album-cover"src="https://images.8tracks.com/cover/i/009/883/162/tumblr_nra20qoAw41qzp1j8o2_1280-9783.gif?rect=59,0,432,432&q=98&fm=jpg&fit=max">
      <img class = "album-cover" src="https://images.8tracks.com/cover/i/009/564/192/7329ec2b80938b862b24175cf8445ea8-1868.jpg?rect=0,73,500,500&q=98&fm=jpg&fit=max">
      <img class = "album-cover" src="https://images.8tracks.com/cover/i/009/732/575/7841098526_510abd2ec7_o-7993.jpg?rect=92,0,1536,1536&q=98&fm=jpg&fit=max&w=1024&h=1024">
      <img class = "album-cover" src="https://images.8tracks.com/cover/i/000/655/115/46099_10151436554292625_1248862229_n-5573.jpg?rect=133,0,633,633&q=98&fm=jpg&fit=max"> 
      <img class = "album-cover" src="https://images.8tracks.com/cover/i/010/077/003/tumblr_o77rkhnJGF1vutacho1_500-6413.png?rect=0,0,500,500&q=98&fm=jpg&fit=max">  
      <img class = "album-cover" src="https://images.8tracks.com/cover/i/009/919/152/25820d4a20ddca732d0220000b0fa723-8821.jpg?rect=120,0,398,398&q=98&fm=jpg&fit=max">
      <img class = "album-cover" src="https://images.8tracks.com/cover/i/001/693/941/Sherlock_S03E03_1080p_kissthemgoodbye_net_5000-3819.jpg?rect=0,0,1072,1072&q=98&fm=jpg&fit=max&w=1024&h=1024">
      <img class = "album-cover" src="https://images.8tracks.com/cover/i/009/149/601/405867_2930131703040_1104257610_n-956.jpg?rect=159,0,641,641&q=98&fm=jpg&fit=max">
      <img class = "album-cover" src="https://images.8tracks.com/cover/i/010/158/250/Angbang-smut_copy-7358.png?rect=0,0,500,500&q=98&fm=jpg&fit=max">
      <img class = "album-cover" src="https://images.8tracks.com/cover/i/010/341/098/Kylux_copy-again-4632.png?rect=0,0,500,500&q=98&fm=jpg&fit=max">
      <img class = "album-cover" src="https://images.8tracks.com/cover/i/010/279/809/0aa2af1665e66735f5a9b50e16051274-4133.jpg?rect=0,0,640,640&q=98&fm=jpg&fit=max">
    </div>
    <button id="left-button">
      <i class="fa fa-chevron-left"></i>
    </button>
    <button id="right-button">
      <i class="fa fa-chevron-right"></i>
    </button>
  </body>
</html>

CSS

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

.image-container {
  height: 300px;
  width: 1260px;
  margin: 50px 40px;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
}

.image-container img {
  height: 100%;
  margin-left:5px;
  margin-right: 5px;
  transform: translate(0%, 0px);
}

Javascript

var counter = 0;
var max_album_sections = 2;
var album_covers = document.getElementsByClassName("album-cover");
console.log(album_covers);
document.getElementById("left-button").addEventListener("click", function() {navGallery(-1)});
document.getElementById("right-button").addEventListener("click", function() {navGallery(1)});


function translateImage() {
  var amount = String(-418*counter) + "%";
  for(var n = 0; n < album_covers.length; n++) {
    album_covers[n].style.transition = "translate 1.0s linear 0s";
    album_covers[n].setAttribute("style", "transform: translate(" + amount + ", 0px);");
  }
}

function navGallery(increment) {
  if(counter < max_album_sections && counter > 0) {
    counter = counter + increment;
    translateImage();
  }
  if(counter == max_album_sections && increment < 0) {
    counter = counter + increment;
    translateImage();
  }
  if(counter == 0 && increment > 0) {
    counter = counter + increment;
    translateImage();
  }
}

Facundo Corradini · Accepted Answer · 2018-02-07T07:05:14.463

2

Two things to notice there.

First off, you need to transition the transform property, not the translate value.

Second and more importantly, by using setAttribute on the very next line, you're overriding any previous value the style attribute had. And that includes the transition you just set.

That's why the setAttribute method is generally not recommended, specially for the style attribute.

So fix the javascript with these lines:

album_covers[n].style.transition = "transform 1.0s linear 0s";
album_covers[n].style.transform = "translateX(" + amount + ")";

instead of

album_covers[n].style.transition = "translate 1.0s linear 0s";
album_covers[n].setAttribute("style", "transform: translate(" + amount + ", 0px);");

Alternatevely, you can just delete the line of javascript where you're trying to apply the animation, and add a CSS rule instead

.album-cover{
  transition:transform 1s linear;
}

edited Feb 07 '18 at 07:05

answered Feb 07 '18 at 06:07

Facundo Corradini

3,825
9
24

Changing the javascript to `album_covers[n].style.transition = "transform 1.0s linear 0s";` doesn't seem to acheive the desired effect although adding `.album-cover{ transition:transform 1s linear; }` does. Any sense as to why that might be? – Shadow43375 Feb 07 '18 at 06:18
1

@Shadow43375 I **think** it's because you're using `setAttribute` in the very next line, which deletes the previous values of the "style" attribute. I'll edit my answer to include that as well – Facundo Corradini Feb 07 '18 at 06:42
You are right. The proper way to do this is to include the whole thing in one javascript line as such: `album_covers[n].setAttribute("style", "transition:transform 1s ease; transform: translate(" + amount + ", 0px);"); }` – Shadow43375 Feb 07 '18 at 06:51
1

@Shadow43375 you can do that, but that's not really the proper way either. `setAttribute` is not a recommended method for the style attribute, precisely because of the discussed behaviour. So using `style.transition` and `style.transform` would be preferred. I've edited the answer to show that as well. – Facundo Corradini Feb 07 '18 at 07:00

score 0 · Answer 2 · answered Feb 07 '18 at 06:03

0

The css property you want to set transition on is transform, not translate

album_covers[n].style.transition = "transform 1.0s linear 0s";

answered Feb 07 '18 at 06:03

dshukertjr

15,244
11
57
94

How to trigger css translate animation with javascript

2 Answers2

Linked