Tsparticles: Multiple images with different animation

[thegodliek]

I have 2 different images, I need the first image to move up and the other one to move down, is there a way I can assign a "move" object with all of its options to each image?

[issue-label-bot[bot]]

Issue-Label Bot is automatically applying the label question to this issue, with a confidence of 0.63. Please mark this comment with :thumbsup: or :thumbsdown: to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[matteobruni]

Hi @thegodliek,

Yes it's possible, I created a pen here

https://codepen.io/matteobruni/pen/MWymBxX

In short, you need this configuration:

shape: {
    type: "image",
    options: {
        image: [
            {
                src: "https://particles.matteobruni.it/images/fruits/apple.png",
                width: 32, // this width is used only for image ratio
                height: 32, // this height is used only for image ratio
                particles: { /* here you can specify all the particles options you want */
                    move: {
                        direction: "top"
                    }
                }
            },
            {
                src: "https://particles.matteobruni.it/images/fruits/avocado.png",
                width: 32, // this width is used only for image ratio
                height: 32, // this height is used only for image ratio
                particles: { /* here you can specify all the particles options you want */
                    move: {
                        direction: "bottom"
                    }
                }
            }
        ]
    }
}

[thegodliek]

Thank you for the response, it's what I was looking for, but in your example, the apple.png image is set to move to top, but some of them are moving down!

Is there anyway to fix that?

[matteobruni]

Yes I noticed that and I'm currently investigating

[matteobruni]

tsParticles v1.17.10 is out with the bug fix

[thegodliek]

Thank you very much! The issue is now fixed.