timdt

Moving background

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

Share this post


Link to post
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

 

https://codepen.io/jonathan/pen/gavKab

 

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

 

https://codepen.io/jonathan/pen/YyMKMz

 

Happy Tweening :)

  • Like 5

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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>

</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;
}

 

 

Share this post


Link to post
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.

 

 

:)

Share this post


Link to post
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 :)

Share this post


Link to post
Share on other sites
https://codepen.io/timdt/pen/wrGmxa

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!

Share this post


Link to post
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:

https://codepen.io/GreenSock/pen/59a80b8258ac28930a8cf4f989b02125/

Does that help? 

 

  • Like 2

Share this post


Link to post
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://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 :D

@GreenSock

 

Ty for the help!

 

 

Share this post


Link to post
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

Share this post


Link to post
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.