Is there a way to remove the glitch from an element? I'm facing breaking issues with my project. #24

Ashlc · 2024-01-16T16:23:31Z

Ashlc
Jan 16, 2024

I'm not even sure how to title it properly, but the issue is showcased in the video below.

Error.mp4

It breaks on this section:

while (layersContainer.children.length > 1) {
        layersContainer.removeChild(layersContainer.children[1]);
}

I'm calling it in my code like this:

	const glitch = () => {
		const {startGlitch} = PowerGlitch.glitch("#glitch", {
			playMode: "manual",
			timing: {
				duration: 1000,
				iterations: 1,
			},
			glitchTimeSpan: {
				start: 0.0,
				end: 0.4,
			},
		});
		startGlitch();
		document.getElementById("playerInput").focus();
	};

	const unglitch = () => {
		const {stopGlitch} = PowerGlitch.glitch("#glitch", {
			playMode: "manual",
			timing: {
				duration: 1000,
				iterations: 1,
			},
			glitchTimeSpan: {
				start: 0.0,
				end: 0.4,
			},
		});
		stopGlitch();
	};

usage:

	const miss = () => {
		clearInterval(intervalRef);
		const newHp = hp - 1;
		if(newHp >= 0) glitch();
		if (newHp === 0) {
			gameOver();
			return;
		}
		setHP(newHp);
		newRound();
	};

	const gameOver = () => {
		unglitch();
		setGameRunning(false);
		setText({ hex: "#fff", name: "GAME OVER" });
		setColor({ hex: "#fff", name: "???" });
		setPlayerGuess("");
		setPercentage(100);
		setDuration(8000);
		setHP(3);
		handleCookies();
	};

I'd love to get some help with this because I loved the effect, and if I can't fix it, unfortunately I'd have to remove it from the project :\

Answered by 7PH

Jan 16, 2024

Hey there @Ashlc , there are a few things to consider here:

You are not supposed to call PowerGlitch.glitch(..) multiple times, in general - I think that's what's causing the error here
In your case, as you are using iterations: 1, calling startGlitch(..) will only play the animation once, so there's no need to call stopGlitch(..)
(General advice) You should restrict to glitching small elements, because glitching relies on cloning DOM nodes. If you are trying to glitch the whole <body />, I expect you'll encounter visual artefacts at best, errors at worst, especially if used with a framework
Since you are using React, you should probably take a look at the React wrapper, react-pow…

View full answer

7PH · 2024-01-16T18:25:15Z

7PH
Jan 16, 2024
Maintainer

Hey there @Ashlc , there are a few things to consider here:

You are not supposed to call PowerGlitch.glitch(..) multiple times, in general - I think that's what's causing the error here
In your case, as you are using iterations: 1, calling startGlitch(..) will only play the animation once, so there's no need to call stopGlitch(..)
(General advice) You should restrict to glitching small elements, because glitching relies on cloning DOM nodes. If you are trying to glitch the whole <body />, I expect you'll encounter visual artefacts at best, errors at worst, especially if used with a framework
Since you are using React, you should probably take a look at the React wrapper, react-powerglitch, which gives you a ref to associate to a child to glitch

I think this code should do what you want:

import { useGlitch } from "react-powerglitch";
// [..]
function Handler() {
    // [..]
    const glitch = useGlitch({
        playMode: "manual",
        timing: {
            duration: 1000,
            iterations: 1,
        },
        glitchTimeSpan: {
            start: 0.0,
            end: 0.4,
        },
    });
    // [..]
    const miss = () => {
        glitch.startGlitch();
        // [..]
    };
    // [..]
    return (
        // [..]
        <p className="nes-text title" ref={glitch.ref}>...</p>
        // [..]
    );
}

Demo (I've cloned your project to try):

use-glitch.mp4

Hope this helps

2 replies

Ashlc Jan 17, 2024
Author

Wow you really saved my life there. Amazing libraries, both of those versions. Thanks a lot for taking some of your time to help me. Additionally, how would you like to be credited in the project?

7PH Jan 17, 2024
Maintainer

Happy to help - If you want to mention PowerGlitch in your project, I would be happy about it, or just star this project, but don't feel obligated - I'm already happy to see this library being used around

7PH · 2024-05-30T22:25:30Z

7PH
May 30, 2024
Maintainer

I would like to retract one point from my original response, for anyone that would end up reading this discussion:

You are not supposed to call PowerGlitch.glitch(..) multiple times, in general - I think that's what's causing the error here

Since 2.3.3, it is possible to call PowerGlitch.glitch(..) multiple times and it shouldn't cause any issue. If it is, it should be considered a bug and fixed, please feel free to report it.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Is there a way to remove the glitch from an element? I'm facing breaking issues with my project. #24

{{title}}

Replies: 2 comments 2 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

Is there a way to remove the glitch from an element? I'm facing breaking issues with my project. #24

Ashlc Jan 16, 2024

Replies: 2 comments · 2 replies

7PH Jan 16, 2024 Maintainer

Ashlc Jan 17, 2024 Author

7PH Jan 17, 2024 Maintainer

7PH May 30, 2024 Maintainer

Ashlc
Jan 16, 2024

Replies: 2 comments 2 replies

7PH
Jan 16, 2024
Maintainer

Ashlc Jan 17, 2024
Author

7PH Jan 17, 2024
Maintainer

7PH
May 30, 2024
Maintainer