Jump to content


Move the clouds

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

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



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.