Jump to content
Search Community

Seamless loop clouds from offscreen

rulercreative test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have an SVG with various cloud illustrations that I would like to have float across the screen from right to left. I have the animation looping but can't figure out a way to make the repeat seamless. Right now I have to wait until all the clouds are totally offscreen before the repeat happens. Ideally the leftmost clouds would start trailing in again from the right behind the final clouds before they make their way totally offscreen. Any way to fix this?

See the Pen jeLazp by kylehagler (@kylehagler) on CodePen

Link to comment
Share on other sites

1 hour ago, PointC said:

Hi @rulercreative :)

 

Welcome to the forum and thanks for joining Club GreenSock.

 

Do you want to make this all move as a group or do you want each cloud to move individually? If it's the latter, I'd probably do something like this:

 

 

See the Pen KGvZew by PointC (@PointC) on CodePen

Does that help?

 

Happy tweening.

:)

 

 

That is awesome, thank you. Any ideas for the former option?

Link to comment
Share on other sites

  • 2 years later...
  • 2 weeks later...
On 10/13/2018 at 5:06 AM, PointC said:

To move the whole group seamlessly you'll need a second copy. You can clone it, offset the copy x:100% and then tween both to a relative x:-=100%. Then just loop the tween.

 

Happy tweening.

:)

 

 

Hey @PointC I was wondering how can I slow down the clouds here?

Link to comment
Share on other sites

  • 1 month later...

I'm not sure I follow. You just want to make one cloud in your vector software and then clone it a bunch of times? That's certainly doable. You'd loop through, create the clones and append them to a group. After that you'd clone the main group and animate them like the demo I posted.

 

Is that what you meant?

  • Like 1
Link to comment
Share on other sites

yes, each clone iteration to have a random opacity (within a range) and speed. In the cloud demo codepen posted earlier, the clouds start from left. I am hoping to achieve something that has clouds randomly all over the screen and regenerating as they come off screen. ... something like this... 

 

See the Pen OJppQjd by avichaiyl (@avichaiyl) on CodePen

 

 

Thanks for the help in advance :) 

Link to comment
Share on other sites

Here's a link that will be useful for the random opacity and speed - random()

Armed with that, the pens in this thread and Craig's instructions, you should be onto a good path!

22 hours ago, PointC said:

You'd loop through, create the clones and append them to a group. After that you'd clone the main group and animate them like the demo I posted.

 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...