TimelineMax, похоже, не работает для меня.Временные шкалы требуют каких-либо дополнительных настроек помимо целевого значения, времени и значения атрибута? - PullRequest
Новая
       93

TimelineMax, похоже, не работает для меня.Временные шкалы требуют каких-либо дополнительных настроек помимо целевого значения, времени и значения атрибута?

0 голосов
/ 17 июня 2019

Итак, я работаю над переносом анимации облаков с анимации CSS на анимацию JS с использованием TimelineMax.тем не менее, у меня всегда возникали проблемы с Timeline [Max / Lite].На этот раз точно так же.Я просмотрел документы, но не могу найти проблему.Есть ли что-то, что я пропускаю в аргументах, которые я передаю, или в других частях моего кода.любые предложения помогают, поскольку это мешает мне двигаться вперед.Спасибо!

просто чтобы прояснить, анимация означает быть зацикленными анимационными облаками, движущимися по экрану взад-вперед

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>
...