I need some advice on how to achieve this this interaction.
I want three layers of clouds moving in different speeds and all layers in a continues seamless loop.
How would you do that?
Right now I’m thinking about having the layer on the back having a few fixed cloud moving really slowly and at the end of the animation fading the clouds out and fading them in and start the animation again.
And the middle and front layer animate all the (maybe 10 clouds) clouds separately, or is that to heavy on the browser?
Main question is to have something move seamlessly like a video whiteout any breaks?
I would suggest using a background video or svg animation created in animation software that can compress really well.
If you did this with images in WF, I’d be inclined to believe, there would be a lot of triggers and effects. Too many add a lot of JS and may get bogged down.
I’d use an SVG animation for easier compression. You could create something in After Effects or some other application then test the size out before committing to the design. Just a few thoughts.