CODEWITHSUNDEEP
javascriptcsscss-transitionsslideshowtransition
Shadow43375
Shadow43375

Reputation: 604

How to trigger css translate animation with javascript

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();
  }
}

Upvotes: 0

Views: 2205

Answers (2)

Facundo Corradini
Facundo Corradini

Reputation: 3923

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;
}

Upvotes: 2

dshukertjr
dshukertjr

Reputation: 18640

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

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

Upvotes: 0

Related Questions