Moving background

[timdt 29 Likes (Newbie)]

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!

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

[Jonathan 5,389 Likes (Superhero)]

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

[timdt 29 Likes (Newbie)]

@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!

[timdt 29 Likes (Newbie)]

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

yet again u guys are awesome

[Jonathan 5,389 Likes (Superhero)]

Yep you can put text over it.. just use position:absolute with z-index.

 

https://developer.mozilla.org/en-US/docs/Web/CSS/position

 

[timdt 29 Likes (Newbie)]

@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>

</div>

<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",
    //autoRound:false,
    ease: Linear.easeNone
});

});

 

#animation{
background:url("stingray.jpg") repeat 0 0 transparent;
width:300px;
height: 600px;
margin:50px auto;
border-radius:20px;
position:absolute;
}

 

 

[Jonathan 5,389 Likes (Superhero)]

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.

 

 

[Jonathan 5,389 Likes (Superhero)]

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

[timdt 29 Likes (Newbie)]

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!

[GreenSock 18,257 Likes (Superhero)]

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? 

 

[timdt 29 Likes (Newbie)]

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://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

 

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

 

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

 

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

@GreenSock

 

Ty for the help!

 

 

[timdt 29 Likes (Newbie)]

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