0

I have floating particles on the screen already, and have a cursor trail of them, I am wanting the duration of the trail to disappear after a half second, but NOT the particles already on the screen, but do not know where to put it. All of the commented out durations is where I have tried it already.

<Particles
            id="tsparticles"
            init={particlesInit}
            loaded={particlesLoaded}
            options={{
                // duration: .4,
                // makes them all dissappear
                fpsLimit: 120,
                interactivity: {
                    //duration: .4,
                    events: {
                        //duration: .4,
                        onHover: {
                            //duration: .4,
                            enable: true,
                            mode: "trail",
                        },
                        onClick: {
                            enable: true,
                            mode: "push",
                        },
                        resize: true,
                    },
                    modes: {
                        push: {
                            quantity: 4,
                        },
                        trail: {
                            //duration: .4,
                            delay: .011,
                            pauseOnStop: true,
                            quantity: 1,
                            particles: {
                                //duration: .4,
                                size: {
                                    value: { min: 5, max: 10 },
                                },
                            },
                        },
                    },
                },
                particles: {
                    // duration: .4,
                    rotate: {
                        value: 0,
                        direction: "random",
                        animation: {
                            speed: 5,
                            enable: true
                        }
                    },
                    collisions: {
                        enable: true,
                    },
                    move: {
                        direction: "none",
                        enable: true,
                        outModes: {
                            default: "destroy",
                        },
                        random: false,
                        speed: 2,
                        straight: false,
                    },
                    number: {
                        density: {
                            enable: true,
                            area: 800,
                        },
                        value: 10,
                    },
                    opacity: {
                        value: 0.5,
                    },
                    //  //duration: .4,
                    shape: {
                        type: "image",
                        images: [
                            {
                                src: fish
                            },
                            {
                                src: paw
                            }
                        ],
                    },
                    size: {
                        value: { min: 10, max: 20 },
                    },
                },
                detectRetina: true,
            }
            }
        />

I have tried adding duration to where it is commented out in the code above, but they do not do anything.

0 Answers0