This came out of a 24-hour work sprint to replicate some sophisticated video VFX in to make it more flexible. You can see the original here
There's a lot of pieces that go into an effect like this. What follows is an outline of the animations and VFX concepts, all in pure css :)
Core principles:
Create muultiple layers to play with. For this example I'll use ::before & ::after elements, but this could just as easily be multiple divs overlapped, or whatever.
Build out a set of clip-paths (Eg. I wrote up a generator util for this project)
Example Path:
Over text:
Create a stepping movement animation, so that the layers above can appear in different places as the other layers of the animation happen.
It's best to make this timing somewhat erratic.
Create a similar animation for opacity, so that the layers can appear/disappear. This will get layered with the movement to create the appearance of the layers popping in and out in different places
There's an art to getting this transition to work without making the user feel motion sickness. Take some time getting it right
The next layer is changes to the font directly. These could be any properties, but we'll stick to font-weight and color.
Note that some of tthe animations have sync'd timing, and some don't.
I try to sync the paths & opacity animations, so that it looks like the background layers are really a part of the main text that's glitching off.
Then I try to separately sync the color/text/filter other effects, and keep the moevment separate completely. This gives the whole thing the appearance of a lot more effects than are actually happening, because of the different combinations.
For good measure, it should live in the right language & context :)