Becky Becky - 6 months ago 10
Javascript Question

TranslateX to appear as animating

I am trying to use more css and less Javascript for animation. I am running into an issue animating three different boxes. I have the boxes fade in with opacity by adding the

fadeShow
class to bring the opacity to 1. However, I am wanting the boxes to appear as if they are animating from the left side of the page to the right.

Here is a fiddle that shows it in action:

Click here to see

.info-box {
border: 1px solid black;
padding: 50px;
background: #00f;
color: #fff;
display: inline;
margin: 0 100px;
transition: 1s;
opacity: 0;
}
.info-box.fadeShow {
opacity: 1;
transform: translateX(150px);
}


I am trying to make the boxes animate over 150px OR if there is a better way to do this to put the boxes into their perminent state. What I mean by this is, if the boxes are supposed to be at
left: 25%;
,
left: 45%;
and
left: 65%;
, then I would want the boxes to be 150px to the left of that and then transition into place.

Answer

Without CSS animations and calc function:

window.addEventListener("scroll", function(event) {
    
    var top, green, red, yellow;
  
    top = this.scrollY;
  
    green = document.querySelector("#green"),
    red   = document.querySelector("#red"),
    yellow= document.querySelector("#yellow");
    
    if(top > 100){
      green.classList.add("green", "active");
      red.classList.add("red", "active");
      yellow.classList.add("yellow", "active");
    }
}, false);
*{box-sizing:border-box; height: 400vh}
body{margin: 0; padding-top: 200px}

.box{
  width: 150px;
  height: 150px;
  opacity:0;
  position: absolute;
  transform: translateX(-150px);
  opacity:0
}

#green{
  background: green;
  left: 25%;
}
#red{
  background: red;
  left: 45%;
}
#yellow{
  background: yellow;
  left: 65%;
}
#green.green{transition: all .3s ease}
#red.red{transition: all .6s ease}
#yellow.yellow{transition: all .9s ease}

#green.active,
#red.active,
#yellow.active{opacity: 1;transform: translateX(0);}
<section>
  <article>
    <div id=green class=box></div>
    <div id=red class=box></div>
    <div id=yellow class=box></div>
  </article>
</section>

With CSS animations and calc function:

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

.box{
  width: 150px;
  height: 150px;
  position: absolute
}

#green{
  background: green;
  left: 25%;
  animation:slideinGreen .3s ease
}
#red{
  background: red;
  left: 45%;
  animation:slideinRed .6s ease
}
#yellow{
  background: yellow;
  left: 65%;
  animation:slideinYellow .9s ease
}
@keyframes slideinGreen {
  from {
    left: calc(25% - 150px); opacity: 0
  }
}
@keyframes slideinRed{
  from {
    left: calc(45% - 150px); opacity: 0
  }
}
@keyframes slideinYellow {
  from {
    left: calc(65% - 150px); opacity: 0
  }
}
<section>
  <article>
    <div id=green class=box></div>
    <div id=red class=box></div>
    <div id=yellow class=box></div>
  </article>
</section>

Now you can add EventTarget.addEventListener() and Element.classList

window.addEventListener("scroll", function(event) {
    
    var top, green, red, yellow;
  
    top = this.scrollY;
  
    green = document.querySelector("#green"),
    red   = document.querySelector("#red"),
    yellow= document.querySelector("#yellow");
    
    if(top > 100){
      green.classList.add("green", "active");
      red.classList.add("red", "active");
      yellow.classList.add("yellow", "active");
    }
}, false);
*{box-sizing:border-box; height: 400vh}
body{margin: 0; padding-top: 200px}

.box{
  width: 150px;
  height: 150px;
  opacity:0;
  position: absolute
}

#green{
  background: green;
  left: 25%;
}
#red{
  background: red;
  left: 45%;
}
#yellow{
  background: yellow;
  left: 65%;
}
#green.green{animation:slideinGreen .3s ease}
#red.red{animation:slideinRed .6s ease}
#yellow.yellow{animation:slideinYellow .9s ease}
#green.active,#red.active,#yellow.active{opacity: 1}
@keyframes slideinGreen {
  from {
    left: calc(25% - 150px);opacity:0
  }
}
@keyframes slideinRed{
  from {
    left: calc(45% - 150px);opacity:0
  }
}
@keyframes slideinYellow {
  from {
    left: calc(65% - 150px);opacity:0
  }
}
<section>
  <article>
    <div id=green class=box></div>
    <div id=red class=box></div>
    <div id=yellow class=box></div>
  </article>
</section>