Continuous scrolling of background image?

[Justin N]

I am looking through the forum to find ideas for how I might make a scrolling background that repeats.  I'm thinking the approach I want to take is something like using two images that span the viewport, one tagged to the end of the other.  Both will animate say along x, and when the first is fully off the screen, I'd like to move that one behind the second one. 

 

I figured that maybe I could use a repeat function with an onUpdate to detect when the 'leading image' is fully off the screen then set the position behind the trailing image. Things that I know I'll need but can't figure out is a) how do I detect the first image has scrolled out of the viewport? b) how do I put the leading image right behind the trailing image?

 

Many thanks!

[Cassie]

Hey there Justin,

 

Thanks for being part of Club GreenSock. Here's a thread that will help.  
 

And the demo

See the Pen 35157203ee19d7bc5cac465995fc69b8 by PointC (@PointC) on CodePen

[PointC]

Hi @Justin N 

 

Welcome to the forum and thanks for being a Club member. 🎉

 

For these types of animations I almost always create a clone and set the yPercent/xPercent to +/-100. Depends on what you're doing. Then tween both to an x/y percent of +=/-= 100 (again, depends on which way you want it to go). Add infinite repeat and you're good to go. Here's an old seamless cloud demo which shows the technique. Happy tweening and welcome aboard.  

 

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

[PointC]

Ha. One second too slow @Cassie.  🤣

[Cassie]

Ahaha. 😂

 

 

[Justin N]

Hi. Thanks to you both Cassie and Craig. 

So, please read this with a smile and chuckle (i.e. it's meant to be friendly!)

Since you are both in a little competition to see who is faster, may I up your challenge?   You both post numerous correct answers ... would you both be willing to beef up the answers a tad with a little more code comments or explanation in your answers? 

On this round, I awarded Cassie the acceptable solution since she was first and neither of you a) described the solution, yes even you Craig! You said what you do but you didn't say why and b) neither of you added any comments in your code ! LOL

 

Now seriously though, THANK YOU BOTH !