Jump to content
Search Community

Help me understand: seamless loop of clouds

taapo 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

Hi there,


First post, but I have been exploring GSAP for a couple of days now.


I just ran in the first roadblock - for which I don't have a solution. It's not really a code problem, but more of a "how would I approach this"-problem.


Take a look at this:



This div has moving clouds. I would like to recreate this with TweenLineMax (for the repeat factor), but I'm not sure how to do this:

  • Start with an empty div
  • Set starting position of each cloud with css, or with GSAP?
  • Animate the clouds as a group (using overlap function) ... or each cloud as a timeline seperately? (how is this done?)
  • When one of the clouds reaches the end of the div, reset the position to zero and start over.
  • Additionally, I'd like have each cloud end and start with opacity 0, and have a fade in/out. I could solve this with a overlapping div with css gradient, but was wondering how you can do this within gsap?

I have no clue as how to do this in the most efficient way. Could one of you give me a headstart on how *you* would approach this problem? Many thanks!




Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


Here is a basic example of infinitely repeating clouds:



Each cloud is dynamically generated, positioned and placed in a TimelineMax that repeats.

For extra flavor I place each cloud's timeline inside another timeline so that all the clouds can be paused, reversed or played very easily. 


Since I am animating the clouds left property to 100% you will also note that you can resize the browser window and the animation continues to work fine. 


I commented each line of code. Let us know if you need more help or explanation.

  • Like 6
Link to comment
Share on other sites

  • 2 years later...

Hi Carl,


I'm new to GSAP and love it so far.  

I've forked the clouds sample you created. 

See the Pen PPwVjr by atkinson (@atkinson) on CodePen


I'd like them to move slowly, with varying opacity, in a staggered fashion. 


My questions are:

  1. Is there a trick to prevent the clouds from bunching up, sometimes they come in as a cluster.
  2. And how can I vary opacity?

Thanks so much!



Link to comment
Share on other sites

  • 1 year later...

Hi piyushwalia  :)


If you're forking Diaco's pen, you just need to add one property to the last part of the tween and the clouds will move diagonally. Pleases try this:

 {left:"100%", top:"100%", ease:Power0.easeNone, delay:Math.random()*15, repeat:-1});

Just an FYI - 'x' and 'y' will be better than 'left' and 'top', but this should get you started.


Happy tweening.


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...