Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
gmw

Infinitely repeating SVG clouds

Recommended Posts

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(cloud, {left:-100, opacity:0});
 
  //now let's animate the clouds
  var cloudTl = new TimelineMax({repeat:-1});
  // fade opacity to 1 
  cloudTl.to(cloud, 0.5, {opacity:1})
  // animate cloud to right 
  .to(cloud, 6 + (Math.random() * 8), {left:"100%", ease:Linear.easeNone}, 0)
  //0.5 seconds before timeline ends start fading opacity to 0 
  .to(cloud, 0.5, {opacity:0}, "-=0.5");
  
  //add this cloud's timeline to the allClouds timeline at a random start time.
  allClouds.add(cloudTl, Math.random()*5);
})

I have based my code on this pen: 

See the Pen drCFD by GreenSock (@GreenSock) on CodePen

which does not use SVG for clouds.

 

The fade in and and fade out tweens seems to be working fine but I can't get the 6 SVG clouds to move at all. The line in question is:

// animate cloud to right 
  .to(cloud, 6 + (Math.random() * 8), {left:"100%", ease:Linear.easeNone}, 0)

Some research has led me to believe that part of my problem may be that my 6 <path> elements (i.e. clouds) do not have an attribute to animate, such as CX or CY. They only contain the points definition. So I added a "class="cloud" utilizing absolute positioning but this didn't work.

<path id="cloud" class="cloud" clip-path="url(#SVGID_3_)" fill="#0E6566" d="M92.5,94.4c-15.8,0-56.5,0-69.9,0s-7.3-14.1,0-13.2c0,0-0.2-14.1,14.8-10.8c0,0,1.6-14.8,17.4-14.4s17.4,16.7,16,19.2c0,0,13.9-4.8,16.7,8.8c0,0,7.3-0.2,8.5,3.1C97.2,90.4,95.8,94.4,92.5,94.4z"/>
<path id="cloud_1_" class="cloud" clip-path="url(#SVGID_3_)" fill="#0E6566" d="M512.5,122.8c-9.7,0-34.6,0-42.8,0c-8.2,0-4.5-8.6,0-8.1c0,0-0.1-8.6,9.1-6.6c0,0,1-9.1,10.7-8.8c9.7,0.3,10.7,10.2,9.8,11.7c0,0,8.5-2.9,10.2,5.4c0,0,4.5-0.1,5.2,1.9C515.4,120.4,514.5,122.8,512.5,122.8z"/>
<!--and so on -->

I'm stuck. Any help would be greatly appreciated.

 

Just to clarify, here is what I need to do:

1) animate across the entire containing element

2) clouds should begin animation where they are initially positioned in SVG and not off screen to the left

3) fadein at beginning of timeline, fade out at end (DONE)

4) infinitely loop. Yes I know (repeat: -1) on TimelineMax. I GOT THIS

 

Thanks for any help that you can provide.

 

  • Like 1

Share this post


Link to post
Share on other sites

Hi gmw  :)

 

If you use x instead of left we can make this work. Switch line 34 to this:

TweenLite.set(cloud, {x:-100, opacity:0});

and line 41 to this:

.to(cloud, 6 + (Math.random() * 8), {x:0, ease:Linear.easeNone}, 0)

Once I made that change, your clouds started moving and fading out. 

 

Hopefully that helps.

 

Happy tweening.

:)

  • Like 2

Share this post


Link to post
Share on other sites

As always, PointC, thanks for your prompt reply and great response! The clouds are definitely moving! Your changes start the animation for each of the clouds, 1000px to the left of their original position and tweened to their original position. Sorry, my question was poorly written. This was not the complete effect I was looking for.

 

Here is what I need:

 

1) The first time through the timeline, the clouds need to be tweened FROM their original positions shown in the first SVG TO the end of the SVG viewport on the right. As already noted the clouds should begin to fade out as they near the SVG viewport on the right.

 

2) For the remaining iterations (2nd to infinity) of the timeline, the clouds need to be tweened FROM the left edge of the SVG viewport TO the right edge SVG viewport (i.e entire width).  Clouds should fade in and out, as appropriate on each side of the SVG viewport.

 

3) I need it to be responsive so that no matter what size device is viewing the animation, the next iteration of the cloud on the left will begin as soon as the previous one ends on the right.

 

I forked my original pen and stripped everything out of the SVG except for 2 clouds :

See the Pen rLKdwA by gmw (@gmw) on CodePen

. This pen contains 2 SVG elements. The first one is to show you the original position of the clouds within the SVG. The second SVG is our playground.

 

BTW, I realize that you guys don't work for me. If it is easy to just give me the code, great. But if that doesn't work well for you on this one, coding tips are also very welcome. Thanks again!

I forked my original pen and stripped everything out of the SVG except for 2 clouds : 

See the Pen rLKdwA by gmw (@gmw) on CodePen

. This pen contains 2 SVG elements. The first one is to show you the original position of the clouds within the SVG. The second SVG is our playground.

Share this post


Link to post
Share on other sites

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

 

  • Like 2

Share this post


Link to post
Share on other sites

You're missing a few things...
 
Change the path coordinates so that they are positioned in the top-left corner, and not where you want them. This is how the initial position is set. 

if (firstRun) tl.progress(random(0.9));  

You can set the progress to position the clouds where you want. If you want a cloud at x=400, you would calculate the progress like this.

tl.progress((width + 400) / dist); 

The width attribute was for the image, and does not exist on a path. 

// Change this...
var width = cloud.getAttribute("width") * 1;  

// ...to this
var width = cloud.getBBox().width;  

If you're going to reuse the same animations, you don't have call the animateCloud function onComplete. Change the timeline to a TimelineMax and set it to repeat.

  • Like 3

Share this post


Link to post
Share on other sites

Just to add my two cents.. you might have to add a slight rotation:0.01 and maybe along with z:0.01 for IE and Firefox so it can help prevent some jerky motion. :)

  • Like 1

Share this post


Link to post
Share on other sites

Thanks OSUBlake! You really are a SuperHero! I want to keep this thread open for another day or so. Hope that is OK. 

 

As you can see, I placed the SVG into a container div and I am trying to get the fade in and fade out to work within that confine. I'm playing with values and writing them to the console to understand better what is happening and what needs to be changed. 

 

This has been a very interesting exercise! Thanks for your help. 

Share this post


Link to post
Share on other sites

Hi 

 

sorry to reopen this this but I wondered if this was the best place to put this.

 

ive used some of @OSUblake code from his sag clouds.

 

ive tried adapting it to get the width of the svg and animate the clouds across the full width. They seem to stop before they scroll over the far right. I’m a bit stuck as I’ve tried many things but can’t seem to get it to work. Any suggestions would be very much appreciated. See code pen below

 

thanks Dave

 

See the Pen bGbvxgL by Air66 (@Air66) on CodePen

 

 

 

 

Share this post


Link to post
Share on other sites
17 hours ago, air66 said:

ive tried adapting it to get the width of the svg and animate the clouds across the full width. They seem to stop before they scroll over the far right.

The biggest problem is that jQuery seems to be giving a width that's less than the actual width of the SVG container. Changing that to use a more accurate width, like .getBBox().width, seems to fix the issue. 

 

But besides that you were trying to return a timeline that doesn't exist. So I added individual cloud timelines to a parent cloudTL and returned that.

 

See the Pen WNezBRq by GreenSock (@GreenSock) on CodePen

 

Happy tweening!

Share this post


Link to post
Share on other sites
7 hours ago, ZachSaucier said:

Changing that to use a more accurate width, like .getBBox().width, seems to fix the issue. 

 

I think you posted the wrong demo.

 

See the Pen WNezBRq by GreenSock (@GreenSock) on CodePen

 

 

 

Share this post


Link to post
Share on other sites
8 hours ago, OSUblake said:

I think you posted the wrong demo.

Indeed I did. Thanks for catching that!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×