Basic Help Needed With TimelineMax

[Leviathan_the_Great]

so I've seemingly never been able to get TimelineMax/TimelineLite to work. I've always gotten around this by using TweenMax tween's onComplete property to invoke the next tween, but, with the current animation I'm working on, it's necessary to have some of the functionality TimelineMax provides in my animation. What I am trying to is animate the clouds in this scene to move to and from each side of the screen. I am trying to do this with a repeating timeline for each cloud.     

 

The JS relevant to this issue can be found in this "passiveCloudAnimation" IIFE function.

(function passiveCloudAnimation(){
  
  let numOfClouds = 3;
  
  let cloudOne = new TimelineMax();
  cloudOne.to( "#cloud-1", 9, {transform:"translateX(94vw)"} )
  cloudOne.to( "#cloud-1", 9, {transform:"translateX(0vw)"} )
    
})();

 

and so you needn't go searching around too much here are all the relevant css selectors and rules.

.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 bump*/
  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;
}

The html is pretty self-explanatory.

 

I feel like I'm following the docs exactly as it says, though as I put before I really have never been able to use GSAP Timelines. so I hope you guys can let me know what I've been messing up on all this time. thanks!

See the Pen KqbpdY by Leviathan_The_Great (@Leviathan_The_Great) on CodePen

[PointC]

I'm not quite sure what should be happening here, but the cloud isn't moving because you have a lowercase 'c' on your tween target.

 

// switch this
cloudOne.to( "#cloud-1", 9, {transform:"translateX(94vw)"} )
cloudOne.to( "#cloud-1", 9, {transform:"translateX(0vw)"} )

// to this
cloudOne.to( "#Cloud-1", 9, {transform:"translateX(94vw)"} )
cloudOne.to( "#Cloud-1", 9, {transform:"translateX(0vw)"} )

 

Does that help? Happy tweening.

 

[ZachSaucier]

In addition to the error that PointC points out, you could also remove the need for the second .to() statement if you use Timelinemax's yoyo parameter: 

 

let cloudOne = new TimelineMax({repeat:-1, yoyo:true});
cloudOne.to( "#Cloud-1", 9, {transform:"translateX(94vw)"});

 

You might want to also change the yoyoEase parameter as well.

[Leviathan_the_Great]

28 minutes ago, PointC said:

I'm not quite sure what should be happening here, but the cloud isn't moving because you have a lowercase 'c' on your tween target.

 

// switch this
cloudOne.to( "#cloud-1", 9, {transform:"translateX(94vw)"} )
cloudOne.to( "#cloud-1", 9, {transform:"translateX(0vw)"} )

// to this
cloudOne.to( "#Cloud-1", 9, {transform:"translateX(94vw)"} )
cloudOne.to( "#Cloud-1", 9, {transform:"translateX(0vw)"} )

 

Does that help? Happy tweening.

 

man, such a silly mistake! thank you for the reply!