Whole page overlay? Anyone succeeded in achieving this?

Considering adding a simple animation that runs over the top of a webpage. Basically an animated butterfly using frame animation for position and loops (sprite sheet) to play the flutter sequence.

Wondering if using z-index would be the trick though this could cause all links on the page to fail unless due to the animation layer taking up the full viewport.

Just putting this out there in case anyone has already done something similar and can share some perspective so as to not reinvent the wheel.

Thanks in advance

Hi Steve!

I have not done anything like You are describing - but I had a couple of thoughts…

Why does the “butterfly” overlay have to take up the whole viewport - why couldn’t it be a DIV that just fits the the butterfly so the DIV moves and the Butterfly animates inside it.


If this idea is not operational for some reason, You could set the pointer-events for the overlay to “none”.

1 Like

Do you mean something like this ?

Example with the @JimScott suggested none pointer-events set on the main hype container

bf.zip (1.4 MB)


Nice Butterfly!

I cheated. It is just a gif from the web…

1 Like

Yes, that looks like it is an Overlay AND allows Underlay links to still work.

Thanks, I will review how this is achieved.

1 Like