Jump to content
Search Community

Moving background

timdt test
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

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

 

 

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://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!

 

 

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.
×
×
  • Create New...