Jump to content


css plugin error

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

Hi I am getting a 404 error in dev tools when trying to use the following tween


TweenLite.from($('#anElement'), 0.3, {backgroundPosition:"0 100px", delay:0.3});


I have these files loaded:



Error message:
GET http://localhost/root_folder/none 404 (Not Found)
Dev tools says the error is coming from:

The tween works correctly but I can't have the 404 for production.
Any ideas what is causing this?
Link to comment
Share on other sites

It sounds like you're trying to tween the backgroundPosition of an object that has no background image - does that sound right? The line you mentioned is one where CSSPlugin sets the src of a temporary <img> tag to your background-image so that it can measure its width/height and calculate percentages correctly (this only happens if the starting/ending values have mixed units, like px and %). I don't think there's any other way to do it because it must know the dimensions of the image in order to translate the percentage to px or visa-versa. I'll add some logic to CSSPlugin, however, to just skip it completely if it senses the background-image is "none".

Link to comment
Share on other sites

Hi, thanks for the quick reply.


The element does have a background image and it is getting tweened properly, it's just that I was getting the weird 404 error message as well. As a quick fix I just comments out the whole function:




Not sure what other implications this will have but the error is gone for now


Another great library btw. I have use the actionscript version for the last three years so this was a pretty easay switch over - thanks. 

Link to comment
Share on other sites

Glad you resolved it. Would you mind posting a super simple example file that shows the issue? Nothing complex - as basic as you can. I just really want to see this error because if you do indeed have a backgroundImage defined in your css, it should be reported by the getComputedStyle() in the browser and yet it sounds like from what you're saying it's not. 


As far as the ramifications of disabling that function, it simply won't be able to animate percentages correctly if you mix px and %. For example, if it starts out as backgroundPosition:"20px 50px" and you try tweening to "50% 100%", it won't work correctly (you'll see a jump). Also, it won't correctly parse the backgroundPosition in older versions of IE because those browsers report them differently.

Link to comment
Share on other sites

Ok I have reduced the code down to the bare minimum and everything is behaving and error has gone.


This is part of a large project so I guess it could be something conflicting. I will try and reduce this down and get something posted when I get some time.


Thanks for the info about older ie versions. I just tested this in ie7 & 8 and the animations are indeed not working - my quick fix also failed pretty quickly too!  ;-)

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.