Jump to content
GreenSock

Stefano Monteiro

Animating backgroundPosition with GSAP issues

Recommended Posts

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

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

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

 

This community is priceless.

 

Thanks

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

  • 2 weeks later...

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

  • Like 1
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.
×