How to make second div animate when page is scrolled

I have two cloud images, both of which I need to move from the left of the page to the center when the page is scrolled. So far I can only get the first cloud to move. I cannot figure out why the second cloud won't move. I am new to programming and Javascript - any assistance would be appreciated. Thank you. JSFiddle link and code below:

https://jsfiddle.net/b1ts5gLc/16/

HTML:

   <div class="section"></div>

   <div id="firstMovingCloud" class="cloudInfo">
     <img src="https://i.postimg.cc/2yrPXb1L/cloud.png" class="cloud-image">
   </div>

   <div id="secondMovingCloud" class="cloudInfo">
     <img src="https://i.postimg.cc/2yrPXb1L/cloud.png" class="cloud-image">
   </div>

   <div class="section"></div>

 </div>

CSS:

body {
  background-color: #ADD8E6;
}

.section {
  height: 1000px;
}

.wrapper {
  position: relative;
}

.cloudInfo {
  position: relative;
  text-align: center;
}

.cloud-image {
  width: 240px;
  height: auto;
}

#firstMovingCloud {
  transform: translate(-50%, 0%);/*move the cloud out*/

}

#firstMovingCloud.moving {
  transition: all 2s ease-out; /*bring the cloud in*/
  transform: translate(0%, 0%);
}

#secondMovingCloud {
  transform: translate(-50%, 0%);

}

#secondMovingCloud.movingTwo {
  transition: all 2s ease-out;
  transform: translate(0%, 0%);
}

JAVASCRIPT:

var lastTopFirstCloud;
var lastTopSecondCloud;

window.addEventListener('scroll', function(event) {

  var cloudOne = document.getElementById('firstMovingCloud');
  var cloudTwo = document.getElementById('SecondMovingCloud');

  var firstCloudTop = cloudOne.getBoundingClientRect().top; 
  var secondCloudTop = cloudOne.getBoundingClientRect().top;


    if (cloudOne.className.indexOf('moving') === -1 && firstCloudTop < lastTopFirstCloud) { 
          cloudOne.classList.add('moving');
     }
    lastTopFirstCloud = firstCloudTop;


    if (cloudTwo.className.indexOf('movingTwo') === -1 && secondCloudTop < lastTopSecondCloud) { 
          cloudOne.classList.add('movingTwo');
    }
    lastTopSecondCloud = secondCloudTop;

});

Solution

You mistyped an ID, that's it.

In var cloudTwo = document.getElementById('SecondMovingCloud');, SecondMovingCloud should be secondMovingCloud.

Javascript, CSS, and HTML are case-sensitive.

Not sure if JSFiddle shows JS errors, but when I copied everything into Codepen it showed me the error Uncaught TypeError: Cannot read property 'className' of null. That means document.getElementById() returned null, which led me to your misspelling. Just sharing some thoughts on how to debug.

Just noticed that you also forgot to change the variable names at several places. You probably wrote it once and copied it, but forgot to change the variable names. Here's the corrected version.

var lastTopFirstCloud;
var lastTopSecondCloud;

window.addEventListener('scroll', function(event) {

  var cloudOne = document.getElementById('firstMovingCloud');
  var cloudTwo = document.getElementById('secondMovingCloud');

  var firstCloudTop = cloudOne.getBoundingClientRect().top; 
  var secondCloudTop = cloudTwo.getBoundingClientRect().top;


    if (cloudOne.className.indexOf('moving') === -1 && firstCloudTop < lastTopFirstCloud) { 
          cloudOne.classList.add('moving');
     }
    lastTopFirstCloud = firstCloudTop;


    if (cloudTwo.className.indexOf('movingTwo') === -1 && secondCloudTop < lastTopSecondCloud) { 
          cloudTwo.classList.add('movingTwo');
    }
    lastTopSecondCloud = secondCloudTop;

});

Also you really should be using arrays for this, rather than writing the code twice. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array