create the animation using library (anime.js or gsap.js)

[MaudHutch86]

I have found a librairie not to difficult to use gsap look easier to do the trick . Maybe I am dumb but I did not find an eventListener which could give us the position of DK in order to change it's opacity to 0 or to display none .

Furthermore, It seems that confetti.js does not work well with gsap so I need to find another method to get the effect we want . So far it move to the right and up.

I tried with anime.js the loop feature gives a nice effect but still need to found a way to make donkey disappear when it reaches a certain position Y. If you have any idea to solve those issues please reach out.

[BiljanaKotev]

There is an onended event that you can use to make Donkey Kong dissapear when the music stops, here is the code: function deleteDK() { svgImg.style.display = "none"; }

audio.onended = deleteDK;

If you push your code thru I can take a better look at what the issue is for the confetti

[circuitsunfish]

you don't need an event listener to get the position of DK, just query the DOM to get the existing position.

Alternatively, could use HTML5 canvas because it's possible to adjust the position of an image within the composited image result a lot more finely.

[MaudHutch86]

@BiljanaKotev I did a the same fonction previously ans it did not make the image to disappear

but I changed it with svgImg.style.opacity = "0"; and it seems to have solve the issue.