Jump to content
Search Community

Infinite horizontal loop on pixi sprites

amine gaaliche test
Moderator Tag

Recommended Posts

Happy new year everyone!
I have an array of pixi sprites and would like to move it along the x axis in an inifinte loop. I will be using GSAP for the animation part.

I came across this very nice gsap helper function : Seamlessly loop elements along the x-axis

Unfortunetaly this function does not work with pixi objects. 

Is there an easy way to adapt this function so it can properly handle sprites? If not, what would be the most basic way to create an infinite x loop on an array of sprites?

Thanks a lot!

Link to comment
Share on other sites

Hi amine,

 

That helper function is using the ModifiersPlugin under the hood, but the concept will still be the same for PixiJS or any other JavaScript object.  

 

You can literally drop in your Pixi objects to this pen and it should work fine.

 

See the Pen QEdpLe by GreenSock (@GreenSock) on CodePen

 

The only adjustment you is that you don't need to worry about units because PixiJS doesn't have any.

 

gsap.to(arrayOfSprites, {
  duration: 5,
  ease: "none",
  x: "+=500", //move each box 500px to right
  modifiers: {
    x: x => x % 500
  },
  repeat: -1
});

 

  • Like 2
Link to comment
Share on other sites

  • 5 months later...
On 1/5/2022 at 5:50 AM, OSUblake said:

Hi amine,

 

That helper function is using the ModifiersPlugin under the hood, but the concept will still be the same for PixiJS or any other JavaScript object.  

 

You can literally drop in your Pixi objects to this pen and it should work fine.

 

 

 

 

The only adjustment you is that you don't need to worry about units because PixiJS doesn't have any.

 

gsap.to(arrayOfSprites, {
  duration: 5,
  ease: "none",
  x: "+=500", //move each box 500px to right
  modifiers: {
    x: x => x % 500
  },
  repeat: -1
});

 

This works great. But how to stop this animation at a given index?

Link to comment
Share on other sites

It looks like you set a 2-second timeout that's telling it to go to a certain number. If you want to control the direction, you'll have to add a fair amount of extra logic to sense the direction and how (and how far) to go in that same direction to get to that spot. So your duration would need to be dynamically calculated based on that distance. 

 

That's definitely possible, but well beyond the scope of help we can do for you in these forums. If you want paid assistance, you can post in the Jobs & Freelance forum or contact us directly if you'd like to hire GreenSock on a consulting basis. 

 

You could also consider looking at the helper function in the docs (the one for seamlessly looping on the x-axis) to see how that handles it. I wouldn't say it's a simple thing to understand/decipher, though. 

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