Search the Community
Showing results for tags 'backgroundposition'.
Found 5 results
-
Help needed with background-position animation related to mousemovement
Alexyn0o posted a topic in GSAP
Hello, is there a way to integrate such an effect with GSAP? I know I can achieve this effect with css transform translations, but in my case I need to use background-position to animate the movement related to the mouse position. an idea/approach about what I'm thinking: .. // TweenMax.to(".top-image", 1, {backgroundPosition: newvalueX+"px "+newvalueY+"px", ease:Power4.easeInOut}) // .. ps: The pen is just a preview example for what I'm trying to achieve. Hope some GSAP guru' drop some knowledge or show me a solution , I'm a newbie in the field... Thank you, Best regards! Alex -
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!
-
Greeting to GSAP Team! Great thanks for making this amazing tool! Now about my problem, please, if you can, help me with it. I'm trying to tween backgroundPosition, but it's isn't work with some properties. For example: // This is NOT work TweenMax.fromTo($(this).children('a'), 0.8, {backgroundPosition: 'center left'}, {backgroundPosition: 'center right'} ); And this: // Now it Work TweenMax.fromTo($(this).children('a'), 0.8, {backgroundPosition: 'center left'}, {backgroundPosition: 'top center'} ); The starting background position of element (css style) is "center left".
-
Not sure if this is me or not, so I wanted to check it out. I am more or less doing an animation with a sprite map. When trying to change the backgroundPosition in IE8 I get an error. But changing the backgroundPositionX and Y individually is fine. Here is my code: var flame = document.createElement('div'); . . . flame.style.overflow = 'hidden'; flame.style.backgroundImage = 'url("my_files/images/flame.png")'; var tl = new TimelineMax( { repeat:-1 } ); tl.to(flame, 0, { css:{ 'backgroundPositionX':'-5px', 'backgroundPositionY':'-7px' } }, 0); //no error in IE8 tl.to(flame, 0, { css:{ 'backgroundPosition':'-17px -4px' } }, .1); //error in IE8 The error is: SCRIPT5007: Unable to get property 'backgroundPositionX' of undefined or null reference TweenMax.min.js, line 15 character 22204 Please let me know if I'm coding this wrong. Thanks!
-
I have successfully animated a backgroundPosition through TimelineLite to achieve a some animation. I am now trying to see if I can achieve this with one Tween. Here is what I need to do but its not working yet. var TL = TweenMax("#seqHolder", 1, {backgroundPosition:"-=300px 0", repeat:23, paused:true}); I want to have the background subtract 300px from its position every time the tween repeats. Any input would be greatly appreciated. Thanks.
