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

October 23, 2015

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

October 23, 2015

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.

October 23, 2015

It work's perfect!! Thank a lot.

March 29, 2016

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!

March 29, 2016

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/

January 29, 2018

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

February 1, 2018

Funny, I implemented something similar a while back.

See the Pen pJJvNW by joemidi (@joemidi) on CodePen.

Notifications

Messages

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

Warning: Please note

Recommended Posts

imagosonus

Jonathan

imagosonus

Guest smzweb04

Dipscom

Devotee007

joe_midi

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members