Josefina

Moving Clouds

Recommended Posts

I'm having an issue with clouds which doesn't fully show on this pen since it looks as if they are moving all the way through. I'm tyring to get them to move from left to right. On the actual site, they stop at a certain point and disappear and start over.
How do we calculate position responsively and make it move along the screen?

Share this post


Link to post
Share on other sites

How wide are your clouds? How wide is the stage? Why is 0 such an awesome number?

 

If a cloud is 200, the stage is 1000, and that cloud is positioned at 0.

var tl = new TimelineMax({ repeat: -1 })
  .set(cloud, { x: -200 })
  .to(cloud, 10, { x: 1000 })
  .progress(Math.random())

 

 

Here's a hint. Your SVG is 2645.22 wide.

 

<svg viewBox="0 0 2645.22 1529.55"></svg>

 

 

Now move your clouds to 0, and head on over to this thread.

 

 

  • Like 5

Share this post


Link to post
Share on other sites

Hi @Josefina :)

 

I'd certainly follow @OSUblake's advice. It's a great way to get repeating clouds.

 

That being said, I thought I'd throw my two cents worth out there for you. What you were doing by moving the cloud to x:-2400 can move it off the stage, but then the cloud movement was x:"+=3000". That setup actually only animated to x:600 from its original position (0-2400+3000) which simply wasn't far enough to go beyond the right side. Here's a basic example with the same width as your SVG and a circle path standing in for the cloud.

 

 I've set the SVG overflow to visible so you can see where things are landing. You can see that moving it to -2400 does indeed move far enough to the left, but a 3000 unit move is not enough to go off the right side. SVG coordinates can be a bit confusing sometimes so hopefully that helps a bit.

 

As I said, Blake's approach is great and I'd recommend following his advice for some easy repeating clouds.

 

Happy tweening.

:)

 

  • Like 4

Share this post


Link to post
Share on other sites

Thank you for the feedback @PointC and @OSUblake.

As far as running animation simultaneously, how do I go about it?

 

It seems that the other animation I have does not start running until the cloud one stops. But the cloud should be moving all the time, at the same time as the other animation that I have (such as eyes blinking, flowers moving, eggs shaking etc).

 

Share this post


Link to post
Share on other sites

Do you mean in your go() function where you build the master timeline? If that's the case, I'd just use a position parameter of 0 to start any/all of the nested timelines at the same time. 

 

Happy tweening.

:)

 

Share this post


Link to post
Share on other sites

something like this @PointC? somehow this creates an error...

.add(clearStage(), 'scene-clear-stage', 0)
.add(cloudsMoving(), 'clouds-moving', 1)
.add(enterFloorVegetation(), 'scene-floor-vegetation', 0)

Share this post


Link to post
Share on other sites

You'd need to write it like this:

 

.add(clearStage(), 0)
.add(cloudsMoving(), 1)
.add(enterFloorVegetation(), 0)

 

Right now, you have the label names in the position parameter spot and the 1 and 0 are over in the align spot which only applies in the case of an array. More info about add().

 

https://greensock.com/docs/TimelineMax/add()

 

You could also add a label and then start the nested timelines at the label like this:

.add("someLabel")
.add(cloudsMoving(), "someLabel+=1")
.add(enterFloorVegetation(), "someLabel")

 

Hopefully that helps. Happy tweening.

:)

 

  • Like 4

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.