Throw Confetti on Click

This interaction allows you to trigger a confetti animation whenever a user clicks a button.

How it works

Trigger: Click  - The animation starts when the user clicks the button.

Action: Throw Confetti  - Confetti bursts from the clicked element.

How to use

Select a button to apply the interactions to, then import the interaction.

Interactions used

• Click Interaction
• Throw Confetti Action

Code Block

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"#0b0d4b"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-background wp-element-button" style="background-color:#0b0d4b">Click</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -→

Interaction Code

{
    "type": "click",
    "options": {
        "preventDefault": true
    },
    "timelines": [
        {
            "loop": false,
            "onceOnly": false,
            "alternate": false,
            "reset": false,
            "reverse": false,
            "actions": [
                {
                    "type": "confetti",
                    "key": "action_8efc53bb4f",
                    "target": {
                        "type": "trigger",
                        "value": "",
                        "blockName": "",
                        "options": ""
                    },
                    "timing": {
                        "isStartingState": false,
                        "start": 0,
                        "duration": 0.5,
                        "easing": "outCirc",
                        "customEasing": ""
                    },
                    "value": []
                }
            ]
        }
    ]
}