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!