Animating backgroundPosition with GSAP issues

[Stefano Monteiro]

Hi,

 

I am running through a few issues trying to animate a background image position.

 

1. I would like it to repeat, but it is acting weird when it gets to the end. And it returns to a point close to the end (100%), not to 0.

2. The background position should reset on `mouseenter` so new images start from the top.

3. It seems that the easing:"linear" is not working. Could it be because the other tween the image has?

See the Pen jOarjgX?editors=0010 by stefanomonteiro (@stefanomonteiro) on CodePen

[GreenSock]

The main problem is that you keep creating a new tween every single time there's a mousemove event and also every time there's a mouseenter but you never set an overwrite nor do you kill() the old tween(s). So, for example, you create a repeating backgroundPosition tween the first time the user's mouse enters and then the next time you create a new one but the OLD one is continuing to play and repeat over and over. That tween is affecting the backgroundPosition as well (you're creating a bunch of conflicting tweens). 

 

You could just set overwrite: "auto" on your tween(s) but I'd actually recommend simply reusing a single tween instance rather than creating new ones over and over and over again. That'll perform better. 

 

See the Pen podNjwp?editors=0010 by GreenSock (@GreenSock) on CodePen

 

You had a few typos in there too. 

 

Is that CodePen more like what you wanted? 

[Stefano Monteiro]

That's exactly what I was trying to do. Really appreciate your time going beyond and solving the puzzle.

 

This community is priceless.

 

Thanks

[Stefano Monteiro]

Hi,

Here is an improved version of my code above, where instead of change the src attribute I created a div for each image and change the z-index on mouseenter. It is working, however the bgTween running all the time of all of the images. Ideally, it would only run for the image with the z-index, or when the mouse enter the respective container.

How can I play, pause, restart only an individual tween?

 

See the Pen mdqRpRO?editors=0010 by stefanomonteiro (@stefanomonteiro) on CodePen

[GreenSock]

That's because you have one tween doing all the work for every background image. If you want to pause them individually, you'd need to create a tween for each one. Here's how I'd approach it: 

See the Pen yLPPGem?editors=0010 by GreenSock (@GreenSock) on CodePen

[Stefano Monteiro]

Awesome, nice approach.

 

Quick questions though.
1. Any specific reason to switch the document.querySelector togsap.utils.toArray

2. More of a JS question, so feel free to skip it. But never seen the && being used like this bgTween && bgTween.pause(); Anywhere you could point me out to understand this better?

Thanks a lot for this forum and helps.

[GreenSock]

14 minutes ago, Stefano Monteiro said:

1. Any specific reason to switch the document.querySelector togsap.utils.toArray

Because document.querySelectorAll() returns a NodeList which is missing a bunch of Array methods. I much prefer to have a "real" Array so that I can do things like map(), slice(), splice(), push(), etc. 

 

14 minutes ago, Stefano Monteiro said:

2. More of a JS question, so feel free to skip it. But never seen the && being used like this bgTween && bgTween.pause(); Anywhere you could point me out to understand this better?

That's just a shortcut because the stuff after the "&&" will only evaluate if the first part is truthy. So if bgTween is null/undefined/0/false, that following code won't execute. I just like keeping things concise. 

// long
if (bgTween) {
  bgTween.pause();
}

// short
bgTween && bgTween.pause();

Enjoy!

[Stefano Monteiro]

Love it!! Thanks a lot again