Confetti using Javascript
Application Type
Reactive
Platform Version
11.5.0 (Build 280)

Hello,

@kilian Hekhuis,@Danniel Huklmann, @Miguel 

I have implemented confetti(falling paper/things in a colorful manner) in reactive application. I have used the confetti javascript in a block level. I was not able to achieve the confetti function. But If I use the script in screen level , its working fine. The issue is , I am not able to convert the confetti functionality as a reusable block.

Scripts attached for your reference

1. ConfettiScript - this is the main script

2. ScriptUsedinRenderEvent - the JSON format used as a customized input for the block, which is used in ready event.



tsParticles.load("tsparticles", {

  "fullScreen": {

    "enable": false

  },

  "particles": {

    "color": {

      "value": [

        "#FFFFFF",

        "#FF0000"

      ],

      "animation": {

        "enable": true,

        "speed": 15,

        "sync": false

      }

    },

    "move": {

      "direction": "bottom",

      "enable": true,

      "outModes": {

        "default": "out"

      },

      "size": true,

      "speed": {

        "min": 1,

        "max": 3

      }

    },

    "number": {

      "value": 400,

      "density": {

        "enable": true,

        "area": 800

      }

    },

    "opacity": {

      "value": 1,

      "animation": {

        "enable": false,

        "startValue": "max",

        "destroy": "min",

        "speed": 0.3,

        "sync": true

      }

    },

    "rotate": {

      "value": {

        "min": 0,

        "max": 360

      },

      "direction": "random",

      "move": true,

      "animation": {

        "enable": true,

        "speed": 60

      }

    },

    "tilt": {

      "direction": "random",

      "enable": true,

      "move": true,

      "value": {

        "min": 0,

        "max": 360

      },

      "animation": {

        "enable": true,

        "speed": 60

      }

    },

   

    "shape": {

      "type": [

         "circle",

         "image",

        "triangle",

        "circle",

        "square"

      ]

    },

    "size": {

      "value": {

        "min": 2,

        "max": 4

      }

    },

    "roll": {

      "darken": {

        "enable": true,

        "value": 30

      },

      "enlighten": {

        "enable": true,

        "value": 30

      },

      "enable": true,

      "speed": {

        "min": 15,

        "max": 25

      }

    },

    "wobble": {

      "distance": 30,

      "enable": true,

      "move": true,

      "speed": {

        "min": -15,

        "max": 15

      }

    }

  }

});

 


3. ConfettiDemo - expected output 


Thanks in advance

Regards,

Nithya T

ConfettiScript.txt

Hello Hidayat Mujawar,

Thanks for the reply. The issue is fixed. The problem is, In block level, container id is tsParticles. whereas, In screen level, container name changed as b3_tsParticles.


Hi Nithya T,

Please Check Required Script is already there in the block 

Hello Hidayat Mujawar,

Thanks for the reply. The issue is fixed. The problem is, In block level, container id is tsParticles. whereas, In screen level, container name changed as b3_tsParticles.


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.