Jump to content


How to make repeating background pattern move infinite?

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

Hey all,


I currently have a header with some repeating background pattern. What im looking to do is make this repeating background pattern move towards right and bottom from a point of position: absolute; - in the same speed and in an infinite loop.


You can see a dummy here - hope it somewhat illustrates what im looking to do:

See the Pen oapnB by anon (@anon) on CodePen


Initially my idea was to have it move in one direction first for like 10secs and then change to another direction - as the codepen illustrates.


However lets just keep it simple:
- Would anyone be able to tell me if im able to move my background pattern infinite in one direction?


Right now I offset the background outside of the screen, so that I have some extra background to actually move around without it ending - im not sure how to adress that for an infinite solution - perhaps some resetting needs to be done? But in that case im not even sure how to do that so it looks in sync.


Link to comment
Share on other sites



Sure thing, just change it to TimelineMax, in the vars add repeat:-1, remove the second instance from the timeline and use Linear.easeNone in order to remove any acceleration/deceleration on the animation, like this:

var tl = new TimelineMax({repeat:-1});
function backgroundMoveInitiate()
  tl.to(headerBackgroundContainer, 6, {top:0, left: 0, ease:Linear.easeNone});


Give that code a try and let us know how it went.


Also thanks for providing the codepen, it was vey helpful. I did notice though that you're using version 1.9.8, the latest engine version is 1.11, i'd recommend you to update your code and check regularly GSAP's CDNJS page:




And/or GSAP Github repository:





Link to comment
Share on other sites

Hi rhernando,


Thank you so much for the quick reply! It works perfectly now :)

And also thanks about the engine update note.


Would you mind explaining how the infinite scroll works? Is it something like:
- Background moves from default.x+y to tweenx+y

- Background automatially resets back to default.x+y and repeats the tween



Not that it matters so much in this simple case, since it will barely be noticeable, but assuming my tween makes the background end in a position where the dots doesnt align 1:1 with the dots from the first start frame, then when the tween ends / resets you would basically be able to see an "out-of-sync" "shake/move" going back to the first default frame? If im assuming correct on this, im wondering how this could be adressed,- if even possible?

Link to comment
Share on other sites



What happens is that the engine records the initial value of the property being animated(background position in this case) and repeats the tween endlessly, from that original value to the ending value passed in the vars.


Yep it is noticeable the jump on the background position when the tween loops. One solution could be tween the background in a multiple of the background's size, for example if the image is 10x10 px, tween it's position 400 px to the left and 200 px to the bottom. You'll have to play with those values and see how it goes, personally I've never done something like this nor I remember someone else in the forums doing it, so you're stepping into unknown territory, so to speak, the usual stuff is move a background image or an image sprite in certain amount.




Link to comment
Share on other sites



Based on the background img size (16 x 12) the closest approach could be to change the initial position of the background div  in the css by a multiple of those numbers:

#header-background-move {
	position: absolute;
	z-index: 998;
	top: -240px;/* 12 * 20*/
	left: -320px;/* 16 * 20 */
	width: 100%;
	height: 100%;
	background: url(http://i.imgur.com/9DYY2W8.gif);
	padding: 0 300px 300px 0;

With those settings you get a more smooth loop.



  • Like 1
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.