Thinking on ways to solve GLITCH effects

In today's GUI Challenge, @AdamArgyleInk creates a cyber glitch effect with CSS clip-paths and transforms.

Chapters:
0:00 - Introduction
0:38 - Overview
2:00 - Debugging Corner
3:34 - clip-path grunge
4:41 - transform
5:55 - clip-path keyframes
6:45 - transform keyframes
7:50 - HTML
8:17 - CSS
9:56 - JS
12:46 - Debugging Keyframes
13:13 - Outro

Resources:

#GUIchallenges #CSS #ChromeDeveloper

[sulaimandev]

I watch the first GUI challenge in November 2020. I love it

[MichaelRichins]

As always, an amazing video. Keep it up!

[ROLND-CSS]

Awesome video! I saw the effect already on your personal site, it’s a rad way to do it 🤘🏼

[WeWantToDevelop]

nice material and instant added this effect to own site

[brentmcd]

on my Chromebook I've been experiencing a video glitch bug with fullscreen video playback the previous video has a fullscreensize 1sec loop glitch with the main video resized with a green line down the right side, can sometimes get it to resize n go back to normal by fast forward or rewind . 💻📹😎🤙

[rogierderuijter]

Would have been cool if you offloaded the js to a worker. Would have love to see how you would do this.

[Stoney_Eagle]

Can you change your theme so your parenthesis and curlybraces are better visible?

[linuxgeex]

This article *should* *have* *responsibly* *been* *prefaced* with a health warning that flashing effects come with a risk of inducing seizures in epileptic site visitors, and causing nausea in those prone to flicker vertigo. Please use flashing/flickering effects responsibly, and respect user preferences to disable these effects.