Search the Community
Showing results for tags 'background-position'.
Found 2 results
-
I've experienced some issues animating background position. As usual everything is perfect in Webkit I only care about IE9+, FF, Chrome, Safari. TweenMax.fromTo($('#rain-' + i), 1, {css:{'background-position': ""+rainHeight+"px 0px"}}, {css:{'background-position': ""+(-rainHeight)+"px 0px"}, repeat: -1, delay:offset, repeatDelay: 0, ease: Linear.easeNone } ); This animates the position of a css linear gradient. It works on everything except Firefox, Firefox just does nothing. However this.... (with camel cased keys) TweenMax.fromTo($('#rain-' + i), 1, {css:{backgroundPosition: ""+rainHeight+"px 0px"}}, {css:{backgroundPosition: ""+(-rainHeight)+"px 0px"}, repeat: -1, delay:offset, repeatDelay: 0, ease: Linear.easeNone } ); ...works fine in Firefox, but causes an invalid argument error in IE10 (it's fine in IE9) SCRIPT87: Invalid argument TweenMax.min.js line 16, character 20973 For the time being I have implemented the following special case which is grim. if (document.all && window.atob) { // Firefox breaks with 'background-position' // IE10 breaks with 'backgroundPosition' // bodge to workaround TweenMax.fromTo($('#rain-' + i), 1, {css:{'background-position': ""+rainHeight+"px 0px"}}, {css:{'background-position': ""+(-rainHeight)+"px 0px"}, repeat: -1, delay:offset, repeatDelay: 0, ease: Linear.easeNone } ); } else { TweenMax.fromTo($('#rain-' + i), 1, {css:{backgroundPosition: ""+rainHeight+"px 0px"}}, {css:{backgroundPosition: ""+(-rainHeight)+"px 0px"}, repeat: -1, delay:offset, repeatDelay: 0, ease: Linear.easeNone } ); } Any suggestions? Is this something that can be fixed in TweenMax?
-
Hi, GreenSock, I'm trying to animate background-position for two background images. It works fine in Firefox, but doesn't in Chrome. Demo (codepen got blocked at work, hope jsfiddle is ok): http://jsfiddle.net/dftks9m1/3/ If you play animation in Firefox, the two images animate up and down nicely and in sync. If you play animation in Chrome, however, images are also animated horizontally and are out of sync. After the animation is reversed, the end value of background-position is set to "background-position: 50% 43px, 50% 50%;" which is wrong. Does anyone know what is going on and how this could be fixed? Thank you, and I love your library!
