Jump to content
GreenSock

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

Move the clouds

Recommended Posts

Hi, I'm new to Greensock and I'm learning this amazing tool. 

I want to make a movement effect of the clouds like in this example: https://layerslider.kreaturamedia.com/sliders/sky-experience/

 

I dont know how to do it, could you help me?

 

What I did is the following:

See the Pen KJQgBr by rodrigo-vassia (@rodrigo-vassia) on CodePen

 

Regards!!

See the Pen KJQgBr by rodrigo-vassia (@rodrigo-vassia) on CodePen

Link to comment
Share on other sites

There are few things to do to make something like this happen.

 

  1. Manipulate the DOM to make a duplicate of each image to allow each "cloud" to loop. This means creating a wrapping container, cloning the cloud image and appending it to the new parent wrapper.
  2. Some CSS to make sure the containing wrapper is twice the width of the cloud it's containing.
  3. Tween each cloud wrapper by 50% of its width and repeat that tween indefinitely.
  4. Set the duration of each such that the closer clouds move by quicker and each layer back is slower than the previous.

See the Pen zeRNwW?editors=0110 by sgorneau (@sgorneau) on CodePen

 

 

Hope that helps!

  • Like 5
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.

×