Jump to content
Search Community

which is the best way to animate css background-position property?

imagosonus 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

I' m sorry, but i start using gsap, from a few days, so my question may be a little silly...
 
which is the best way to animate css background-position property?
 
I've tried doing:

TweenMax.to('.back', 8, {'background-position':300});

where '.back' is the element with background image.

.back {
  background: rgba(0, 0, 0, 0) url("img/seq2_0000.jpg") no-repeat fixed 0 0 / 200% 100%;
}

but what i'm tryng to get is a kind of 'seamless loop' in the background for example a sky and clouds horizontal moving.

 

Anyway GSAP is amazing!!!

 

 

Link to comment
Share on other sites

Hello imagosonus, and Welcome to the GreenSock Forum!

 

In order to animate the background-position property use backgroundPosition in your tween. Make sure you have your value in a string since background-position accepts two values left and top. Default is 0% 0%

 

See the Pen gavKab by jonathan (@jonathan) on CodePen

var tl = new TimelineMax({repeat:-1}); /* repeat loop forever */
tl.to("#clouds", 30,{
  backgroundPosition: "-2247px 0px", /* negative width of background image your animating - left top */
  ease: Linear.easeNone /* make sure you use Linear.easeNone so its smooth */
});

x
And with clouds and grass

 

See the Pen YyMKMz by jonathan (@jonathan) on CodePen

 

:)

  • Like 4
Link to comment
Share on other sites

  • 5 months later...
Guest smzweb04

Hello imagosonus, and Welcome to the GreenSock Forum!

 

In order to animate the background-position property use backgroundPosition in your tween. Make sure you have your value in a string since background-position accepts two values left and top. Default is 0% 0%

 

See the Pen gavKab by jonathan (@jonathan) on CodePen

var tl = new TimelineMax({repeat:-1}); /* repeat loop forever */
tl.to("#clouds", 30,{
  backgroundPosition: "-2247px 0px", /* negative width of background image your animating - left top */
  ease: Linear.easeNone /* make sure you use Linear.easeNone so its smooth */
});

x

And with clouds and grass

 

See the Pen YyMKMz by jonathan (@jonathan) on CodePen

 

:)

 

 

Hi Jonathan,

 

I am also new to Greensock. I'm trying to create a seamless looping cloud background image for a banner ad. The looping is working, but I have a 1 pixel line gap on the seam. I cannot figure out how to get rid of it. Any tips as to what might be causing it? Thank you!

Link to comment
Share on other sites

Hi smzweb04,

 

Welcome to the forums!

 

Do you think you could set a reduced case example? It could be so many things creating this pixel gap that would be very hard to troubleshot in the dark.

 

Here's a little video on how to if you are not familiar with CodePen:

 

And the forum thread:

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

  • Like 2
Link to comment
Share on other sites

  • 1 year later...

Hi,

 

I try to do a sprite animation with an image that is 4000x3800. And it works rather good but every time it changes row it "blinks". I want to move it 20 steps at a time vertical and after that move the image up 200 px and move image from left 0px to 4000px again.  This is the code I use.

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Sprite Sheet Animation</title>
 
 <style> 
#character {
	width: 4000px; 
	height: 3800px;
	background: url(circle-sprite-2.png);
}
</style>
  
</head>

<body>
<div style="width: 200px; height: 200px; background-color: #ccc; overflow: hidden;">
<div id="character"></div>
</div>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script>
var tlCircle = new TimelineMax({delay:0, repeat:-1, repeatDelay:0});	
	tlCircle.to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 0)
	.set(character, {x:0, y:"-=200"}, 1)
	.to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 1)
	.set(character, {x:0, y:"-=200"}, 2)
	.to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 2)
	.set(character, {x:0, y:"-=200"}, 3)
	.to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 3)
	.set(character, {x:0, y:"-=200"}, 4)
	.to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 4)
	.set(character, {x:0, y:"-=200"}, 5)
	.to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 5)
	.set(character, {x:0, y:"-=200"}, 6)
	.to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 6)
	.set(character, {x:0, y:"-=200"}, 7)
	.to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 7)
	.set(character, {x:0, y:"-=200"}, 8)
	.to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 8)
	.set(character, {x:0, y:"-=200"}, 9)
	.to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 9)
	.set(character, {x:0, y:"-=200"}, 10)
	.to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 10)
	.set(character, {x:0, y:"-=200"}, 11)
	.to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 11)
	.set(character, {x:0, y:"-=200"}, 12)
	.to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 12)
	.set(character, {x:0, y:"-=200"}, 13)
	.to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 13)
	.set(character, {x:0, y:"-=200"}, 14)
	.to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 14)
	.set(character, {x:0, y:"-=200"}, 15)
	.to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 15)
	.set(character, {x:0, y:"-=200"}, 16)
	.to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 16)
	.set(character, {x:0, y:"-=200"}, 17)
	.to(character, 1, {x:-4000, ease:SteppedEase.config(20)}, 17)
	.set(character, {x:0, y:"-=200"}, 18)
	.to(character, .8, {x:-2800, ease:SteppedEase.config(14)}, 18)

 

Is there a smarter way to do this? I guess there is... :)

 

//Devotee007

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...