Jump to content
Search Community

Moving Clouds

Josefina test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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?

See the Pen yKdoKX?editors=0010 by joseterrera (@joseterrera) on CodePen

Link to comment
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
Link to comment
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.

 

See the Pen rdXKwr by PointC (@PointC) on CodePen

 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
Link to comment
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).

 

Link to comment
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
Link to comment
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.
×
×
  • Create New...