How to start, pause, stop animation in particles.Vue3

Contact Details

[e-mail]

What do you need?

I have looked everything to figure out how to simply start and pause the animation in particle.vue3 and haven’t figured out where to fire the methods on.

I am also using the shape-confetti plugin.

I’ve added a ref to the <Particles> element, but using that specific ref like: refName.start(), refName.pause or even refName.current.start() says “properties of undefined”, which means it’s not even the correct element to begin with.

It’s by far the best at particles out there, but is also one of the most difficult to follow libraries I’ve ever used.

It seems strange to me that all the different versions for each framework don’t have their own docs as the Vanilla JS does not translate well into all frameworks.

Sorry for my ignorance on this library, but I want to do a simple thing and don’t have time to become an expert on it.

VERSIONS:
“particles.vue3”: “1.5.1”,
“tsparticles”: “1.22.1”,
“tsparticles-shape-confetti”: “1.7.1”,

tsParticles Version

"particles.vue3": "1.5.1",     "tsparticles": "1.22.1",     "tsparticles-shape-confetti": "1.7.1",

Which library are you using?

Vue.js 3.x (vue3-particles, particles.vue3)

Code of Conduct

• I agree to follow this project’s Code of Conduct

[matteobruni]

You can see the answers given here: https://github.com/matteobruni/tsparticles/issues/1184#issuecomment-1233153193

You can achieve this with only emitters options as explained there. You can skip the duration option if you want to start/stop the particles programmatically.

[matteobruni]

Checkout this demo, it shows how to access the start method, but it’s the same for play/pause/stop/refresh: https://codesandbox.io/s/eager-shadow-9bkmsr?file=/src/App.vue

Anyway, the npm link you sent has the import for the loadFull (not fullLoad) and the functions that need to be exposed from Vue. There are a few different modes of exposing properties, from composition APIs to the old-fashioned data/methods coming directly from Vue2 that’s why it’s not specified. A minimum Vue.js knowledge is required. As said many other times loadFull is not mandatory, since you could prefer loadSlim from tsparticles-slim package, or any preset that can be found here, or even loading only some of the available plugins manually. I don’t want to force users to install the full library if they don’t need it.