Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Leviathan_the_Great

Basic Help Needed With TimelineMax

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

:)

 

  • Like 3
  • Haha 1

Share this post


Link to post
Share on other sites

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.

  • Like 3

Share this post


Link to post
Share on other sites
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!

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×