Jump to content
GreenSock

gareth

Countinous scrolling background for a game

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 am trying to loop a background image that is twice the size of my viewport (960px wide). The image starts and ends with the same horizon, so it should be seamless.

I have tried creating two backgrounds and staggering the start time, but am unsure how to allow for the first background (set to left:0). The second background is positioned off stage at 960px.

See the Pen MYgGNX by eighthday (@eighthday) on CodePen

Link to comment
Share on other sites

I tweaked it a bit here 

See the Pen azoKQv by jamiejefferson (@jamiejefferson) on CodePen

 

Things that changed:

- Your image wasn't 960px wide, but 1278px

- I nested mount2 inside mount 1 so you only need to tween 1 element

- added a repeat to the timeline

  • Like 2
Link to comment
Share on other sites

I wasn't 100% sure what you were trying to do, but this should help you solve this:

 

See the Pen ogvydL by maelfyn (@maelfyn) on CodePen

 

A few notes:

- As Jamie pointed out, your background size was only 1278px, not 1920px. I added a CSS rule to fix this.

- I used TweenMax instead of TimelineMax.

  • Like 2
Link to comment
Share on other sites

thank you both! looks great. My background must have been resized when I uploaded it. 

 

  • jamiejefferson would there be a performance problem tweening such a large image? The reason I was trying to tween two elements was to avoid this. 
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.
×