.thumb.jpg.45ad1f0654d8c8cd759c47599fe1796d.jpg)
Infinitely repeating SVG clouds
Here is the pen I am working on:
See the Pen dXKPgm by gmw (@gmw) on CodePen
.
I am having difficulty getting the clouds to animate from left to right.
//select all paths whose ID begins with "cloud"
$('path[id^="cloud"]').each( function( index, element ){
//move current element into var
var cloud = (element);
//TweenLite.set(cloud, {left:-100, top:index*40, opacity:0});
//move cloud to left of container and make invisible
TweenLite.set
Here's some cloud animations using images. I'm animating the same properties as you would for SVG. Use the width of your viewBox for the x value, and it will be responsive. Don't use offsetHeight for a y value though. That's only for HTML elements. Use element.getBBox().height instead.
See the Pen 4f849ca24bb5f1050a69651a6e82f271 by osublake (@osublake) on CodePen
