Confetti on Button click

How to import code

Latest update of the Greenshift plugin has extended support for Rive API which is available now also for Interaction Layers. This can be used to connect different site triggers and fire/update Rive.

In this example, I placed Rive animation block behind the button and added position to the parent container, also button has z-index higher than Rive block (only if you want to play it behind the button)

Another important thing – Rive animation must have a trigger for playing. Otherwise, it will be just looped instead of playing on the trigger. Rive has good documentation and examples of how to use State machine and input controls.

Don’t forget to add also name of State machine which must be the same as in Rive file.

After this, add the Interaction layer, copy Input name from the Developer panel of Rive block, and insert it in the Interaction layers. Check video for details. If you think that Rive is too hard to configure, then, you can use Video action instead. You will need to add two actions: one is for restarting video (so, it will start from the first frame) and the second is for playing the video.

«
»