How do i get my svg's to fill in the window height like images do with this codepen animation. (Greensock js)

Question

I found this awesome codepen sending clouds across the screen. You will notice if you start with a smaller height and then increase it. The clouds that move across the screen will eventually span the entire height of the window. This is what I was looking for however in my case I am using SVG's

I thought maybe i had to give all the svg's individual heights but that didnt work.

Here is the working example i found which is using images: https://codepen.io/osublake/pen/4f849ca24bb5f1050a69651a6e82f271

Here is my example using SVG's https://codepen.io/PortalPacific/pen/LXYKbM

You will notice that in my example all the elements are stuck to the top area. While the original example spans the available height of the viewport.

Here is the required code snippet.

$(window).resize(function() {
  vw = window.innerWidth;
  vh = window.innerHeight;
});

function animateCloud(cloud) {

  var height = cloud.offsetHeight * 0.5;

  TweenLite.set(cloud, {
    scale: random(0.5, 1),
    xPercent: -100,
    yPercent: -50,
    x: 0,
    y: random(height, vh - height)
  });

  TweenLite.to(cloud, random(4, 12), {
    x: vw,
    xPercent: 0,
    delay: random(2) * firstRun,
    onComplete: animateCloud,
    onCompleteParams: [cloud]
  });
}

function random(min, max) {
  if (max == null) { max = min; min = 0; }
  return Math.random() * (max - min) + min;
}

How do i get my SVG's to span the height of the viewport in the animation like the images do?

Any help would be much appreciated!

Answer 1

offsetHeight is a property exclusive to HTML elements, in particular it's not something that SVG elements have.

The simplest thing is probably to wrap the <svg> elments in an html element and have the animation target the html wrapper element instead. Like this...

<div class="icon cloud">
<svg>
  <use xlink:href="#donut2"></use>
</svg>
</div>