TimelineMax doesn't seem to work for me. Do timelines require any additional config beyond, target, time, and attribute value?

问题

So I'm working on porting an animation of clouds from css animation to a js animation using TimelineMax. however, I've always found myself problems with Timeline[Max/Lite]. This time is quite the same. I've gone over the docs, but can't seem to find the problem. is there anything i'm missing from the arguments I pass or other parts of my code. any suggestions help as this is preventing me from moving forwards. thanks!

just to clarify, the animation is means to be a looped animation clouds moving back and forth across the screen

let clouds = [],
    cloudTLs = [],

    cloudSpeeds = [
      null,
      9,
      9.5,
      8
    ];

// if( clouds.length > cloudSpeeds.length ){
//     let cloudSpeedsExtended = f();
//     cloudSpeeds = assignSpeedToUndeclaredClouds()
// }

//retrieve and store clouds

let cloudContainers = document.getElementsByClassName("cloud-container");
cloudContainers = Array.from(cloudContainers);
clouds.push( null, ...cloudContainers )

for(let i = 1; i < clouds.length; i++){
  let tl = new TimelineMax({repeat:-1});
  tl.to( `#cloud-${i}`, 9, { transform:"translateX(94vw)", /*ease:power0.easeNone*/ } )
  tl.to( `#cloud-${i}`, 9, { transform:"translateX(0vw)", /*ease:power0.easeNone*/ } )  
  tl.play()
  cloudTLs.push(tl)
}

body {
  overflow: hidden;
  background-color: blue;
  height: ;
  width: ;
}
.cloud {
  background: #fff;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(5%, #fff),
    color-stop(100%, #f1f1f1)
  );
  background: -webkit-linear-gradient(top, #fff 5%, #f1f1f1 100%);
  background: -o-linear-gradient(top, #fff 5%, #f1f1f1 100%);
  background: -ms-linear-gradient(top, #fff 5%, #f1f1f1 100%);
  background: linear-gradient(top, #fff 5%, #f1f1f1 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(
      startColorstr="#fff",
      endColorstr="#f1f1f1",
      GradientType=0
    );
  -webkit-border-radius: 500px;
  -moz-border-radius: 500px;
  border-radius: 500px;
  /*change box shadow - need to make it thicker*/
  top: 40%;
  height: 54%;
  position: relative;
  width: 100%;
}

.cloud:after,
.cloud:before {
  background: #fff;
  content: "";
  position: absolute;
  z-index: -1;
}

.cloud:after {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  /* for left bumpe */
  height: 110%;
  width: 40%;
  left: 14%;
  top: -46%;
}
.cloud,
.cloud:before {
  -webkit-box-shadow: 12px 20px 20px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 12px 20px 20px rgba(0, 0, 0, 0.5);
  box-shadow: 12px 20px 20px rgba(0, 0, 0, 0.5);
}
.cloud:before {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  /*for right bumpe*/
  width: 48%;
  height: 150%;
  right: 11%;
  top: -75%;
}

.cloud-container {
  display: block;
  position: absolute;
  /*positioning*/
  
  /*keep this ratio*/
  height: 5vw;
  width: 7vw;
  
}
#cloud-1 {
  top: 12%;
/*   animation-duration: 18s; */
  z-index: 17;
}
#cloud-2 {
  top: 22%;
/*   animation-duration: 19s; */
  z-index: 17;
}
#cloud-3 {
  top: 16%;
/*   animation-duration: 16s; */
  z-index: 17;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js"></script>
<div id="cloud-1"class="cloud-container">
  <div class="cloud"></div>
</div>
<div id="cloud-2" class="cloud-container">
  <div class="cloud"></div>
</div>
<div id="cloud-3" class="cloud-container">
  <div class="cloud"></div>
</div>

来源：https://stackoverflow.com/questions/56623253/timelinemax-doesnt-seem-to-work-for-me-do-timelines-require-any-additional-con

标签

javascript

gsap

timelinemax