Confetti effect in hype

Hype won't sync with your time iteration. Neither on web view nor when exported as video. it just syncs its own animations. On video export the runtime will wait until the Hypeview is rendered and then proceed with the next frame. This is why your confetti speeds up ... it runs independent ...

1 Like

oké thanks a lot, maybe I can do them separately and combine them in adobe premiere or something.

Found this video which uses a confetti js.



The video is mainly about creating a button and modal which uses confetti.

But looking at the confetti.min.js code , it uses uses requestAnimationFrame().

This means by changing the frame request you can slow down the frame rate for the video export on the confetti animation.


In this example I have made the confetti js a little more readable and some changes so you can append the confetti to a hype div, the default is the document body.

We can change the default using an option.

To adjust the container we use the option

confetti.container=   ".cont"   //class name on group element

To adjust the frame rate we use the option


The default is 15

for the video export we would use something like

confetti.frameInterval = 250

You can also set the number of confetti used


The default is 150

The original code uses setTimeout functions to start and stop the confetti.
I have not.

Background video not included and note playing in web will look slow unless you remove your confetti.frameInterval options.


Updated and added the .cont container removed by mistake when originally posted.
confetti (18.8 KB)


Thanks a lot...however, when I use confetti I aint seeing anything...
just a white screen :upside_down_face:

I hope that I do something wrong, I would be very happy to use confetti in html export and mp4

Will look at it in min but it maybe where I removed the video from the project I did so be removing the group which I think I had as the confetti container.

You may just need to add your container group and give it the cont class name

Yes that is all it was.

Updated the above with the group container.

Also here
confetti (18.8 KB)


I insert/copied my advertising in it...but it seems, when the javascript is running, the normal timeline isn't running :thinking:

o I think I found it...I also have to start the timeline :wink:

Now I see both "lines"

Scherm­afbeelding 2023-06-26 om 16.03.12 put the confetti in other hype docs...
I must copied somethings in it...

but I don't get the

in the head html :thinking:...I can't change it

Not at my Mac at mo,

You need to add the file to the other projects.
Those lines are auto generated by hype for .css, .js files included in the project resources

The easiest way to get a copy of the confetti.js file is to control click on the confetti 2 hype file in the finder.
Select show package.
This will let you see inside the .hype file in the finder.
Open the resource folder inside it and you should see the confetti.js.

Select it, copy it and then paste a copy else where, I.e to the desktop.

Now with the copy you can drag and drop it into your project’s resource library.

It will then show up in the head as script include.

1 Like

thanks! im gonna try tomorrow at the office :pray:

THANKS! this works :hugs:

1 Like