Jump to content


Moving background

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 guys,


i was wondering if there was a way to animate a background so that it is slowly moving or could add some different kind of effects.

Thank you! :D

See the Pen zEqxOJ by timdt (@timdt) on CodePen

Link to comment
Share on other sites

Hello @timdt and welcome to the GreenSock Forum!


Do you mean something like this? Animating a background image of just clouds


See the Pen gavKab by jonathan (@jonathan) on CodePen


And this one is animating background of clouds and grass.. 2 background images at once.


See the Pen YyMKMz by jonathan (@jonathan) on CodePen


Happy Tweening :)

  • Like 6
Link to comment
Share on other sites

@Jonathan hey jonathan, thank allot for the fast reply,


Yes this is what i mean but what i am wondering is: is this also possible with just background-image and can i still put element on top of it?

Like text etc?


Greeting! :)

  • Like 1
Link to comment
Share on other sites

@Jonathan Nice! I tried it and it worked :) Exactly what i was looking for.

yet again u guys are awesome :D

  • Like 4
Link to comment
Share on other sites

@Jonathan nvm for some reason it won't move. got everything exactly the same. also position absolute and no console errors.

U maybe would know what the problem could be?


<div id="animation">

<div id="content">
<h1> bla bla bla bla bla </h1>
<h3> koop nu bladiebladie </h3>


<footer id="footer">

<h3> hallo dit is een footer banner </h3>



// window load event makes sure image is // loaded before running animation
$(window).on("load", function() {

var tl = new TimelineMax({repeat:-1});
tl.to("#clouds", 30, {
    backgroundPosition: "-2247px 0px",
    ease: Linear.easeNone



background:url("stingray.jpg") repeat 0 0 transparent;
height: 600px;
margin:50px auto;



Link to comment
Share on other sites

Hello again @timdt .. you will have to create a codepen demo example so we can see your code in context and in an editable environment.




Link to comment
Share on other sites

Keep in mind the backgroundPosition in the to() tween needs to be the same width as your background-image.


Like on this line with backgroundPosition: "-2247px 0px", 


-2247px would be the width of your bg image, of course your width is different :)

Link to comment
Share on other sites

See the Pen wrGmxa by timdt (@timdt) on CodePen

I Can't seem to get it working. console shows now errors. everything should be exactly the same as the codepen you sent me @Jonathan 

Hope u can point out the errors for me, would be nice to know what went wrong. :)


Thank for the support!

Link to comment
Share on other sites

I noticed several problems:

  1. Your background image URL in the CSS is pointing to simply "stingray.jpg" which is a relative link...there's no image at that URL so it's not loading. 
  2. You're loading some kind of jQuery plugin but not jQuery, so there are errors about $ not being defined.
  3. Your tween is referencing ".animation", a class, but your element is using an ID instead, "#animation" (notice the "#" instead of "."). So basically GSAP can't find what you're trying to animate.
  4. Your code is inside a $().load(), but jQuery wasn't loaded so the whole thing was failing. 

Here's a fixed version that's just using a texture background that I had on hand:

See the Pen 59a80b8258ac28930a8cf4f989b02125 by GreenSock (@GreenSock) on CodePen

Does that help? 


  • Like 4
Link to comment
Share on other sites

Hmmm, thats weird. Yeah the url is an image in the root folder of my project.

Greensock works fine in my other project folders. got 20 of them or so.




<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>


<script src="action.js"></script>


This is what the end of my html page looks like.

Also i want to use an image i downloaded. Is this possible with the background url ()

and yeah i guess i added the wrong jquery plugin on codepen. couldnt find the proper version.


firstly animation was a class, thought it would make a difference maybe if i changed it to an ID. 

Thanks for pointing that out to me.


Going to look into it again and hope it works :D



Ty for the help!



Link to comment
Share on other sites

@GreenSock Ty it works now, guess the onload and class instead of ID fixed it. Thanks allot for taking the time to respond :) .

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