[Infinite horizontal loop on pixi sprites]

Thanks, However I want to stop the animation on some given index without the need of explicit stop, I tried below but the animation goes in reverse direction to stop at the index. How to do this?

 

See the Pen qBobJvZ by bluestar39 (@bluestar39) on CodePen

[Infinite horizontal loop on pixi sprites]

Here is my try 

See the Pen qBobJvZ by bluestar39 (@bluestar39) on CodePen

I want to stop the animation to a given number, is there any way to do this in the same tween?

 

[Infinite horizontal loop on pixi sprites]

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?

[loop back to beginning on a slider]

8 hours ago, ZachSaucier said:

That's a wholly different subject. Check out this thread:

 

This demo is different than what I am asking. I need to stop the wrap-around slider at a particular side, in the wheel demo, there is no ModifiersPlugin usage.

[loop back to beginning on a slider]

On 10/12/2018 at 7:11 PM, Carl said:

yup and just to add onto Jonathan's advice, here you can see some buttons to navigate

 

be sure to read this thread for more info on what is happening and how it works

 

https://greensock.com/forums/topic/16952-modifiers-plugin-for-infinite-image-carousel/

 

 

 

 

 

 

 

Great example, but If I have to stop it at a particular number dynamically after few spins?

[How to create a sortable list with Draggable]

On 9/4/2016 at 2:29 PM, Joelcox said:

Pretty cool stuff. 

 

I used this demo to created a few connected lists.

 

Check it out

 

 

 

 

This is awesome but i am wondering if we can do the same with Pixi.js Sprites? I have an app where i need similar functionality but with Pixi Sprites. I know that Draggable can be used with Pixi using proxy div element but if the list is big, i will end up using a lot of div elements which might not be a performant way of doing things specially on a mobile device. Thanks in advance.