Dust or powder effect

[edge_dpub (Daniele)]

Hi guys

I am writing an interactive graphic novel and in the first chapter I show a summary of the protoagonist's childhood using static panels in a grid. The grid is white and the last panel marks the passage from static comic to interactive comic. I would like to turn the white frame of the last panel into white powder. Given that it is the only animation in the first chapter this single panel will appear on a separate page.

I would like to use the same effect for the chapters. The chapters will be numbered with Roman numbers in whithe color. When the reader touches the screen on swipes the Roman numbers the white lines will turn into powder and disappear from the screen.

Can anyone help me with that?

[Daniel]

I would get a few textures that are transparent and dust-like, and then animate their movement over the scene. You could just animate their opacity while fading out the content below to create this effect. (But @MarkHunte's solution is perfecto!)

[edge_dpub (Daniele)]

Thank you!

I am looking for a way to create this effect with code.
Like the smoke effect discussed here Smoke effect as background

Thanos Snap effect also seems to be a good solution

Thanos Snap Effect JavaScript Tutorial

[MarkHunte]

That is pretty cool.

I assume you have not tried to adapt it yourself... the YouTube OP does give a source and instructions.

Thanos Snap Effect JavaScript Tutorial - Red Stapler

The adaption is not too hard to figure out.

--

dust_1.hype.zip (133.7 KB)

[edge_dpub (Daniele)]

Thank you very much Mark!
I can't tell you how much this means to me.
The whole novel is based on this powder effect.
It marks the passage from a static comic in the introduction to an interactive comic.

I am happy to see the effect on my logo too.
I will probably use it to promote the graphic novel.

This absolutely amazing!
Thanks again.

[MarkHunte]

Note: the way this works, what ever is in the content ( Class name ) group will be dusted.
So you don't have to only use an image, normal elements will also work.

If you are animating elements that in the group, at the time of dusting pause the animation at the start of the dust.