Move the clouds

[RyRInfo]

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

[Shaun Gorneau]

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!