[Set default value for rotation, opacity, etc.]

Is there a way to set a default value for the rotation of an element, before starting to animate it with the timeline?

 

For example:

 

When loading the document, set element to rotation 180, and opacity 0. Then start timeline with rotation to 0 and opacity to 1. Delay for 2 seconds. Fade out all elements. Start over again.

[Help me understand: seamless loop of clouds]

Awesome, this is a very nice example!

 

Thanks for taking the time to explain this.

[Help me understand: seamless loop of clouds]

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:

http://haraldurthorleifsson.com/googledrive/

 

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!

 

Greets,

Frank