Question 352401 in Html Question posted in
Some basic documentation can be found here.

Html – how to make animation init itself whenever clicking a button in Web Programming

I want to make a react component initiates the animation whenever I click it. There are some options:

  1. if i change the props at middle of the animation, it should re-animate form the start.
  2. changing of the props is triggered by a button of another node.

here’s my code i tried:

function Button() {
  const indexRef = useRef(0);
  const clickHandler = () => {
    indexRef.current++;
  }
  return (<button onClick={clickHandler}><SkillWindow data={somedata[indexRef]}/></button>)
}

interface SkillWindow extends DefaultProps {
  data: SkillData;
}
function SKillCard({ data, className }: SkillWindow) {
  const id: string = "skillcard--0";
  useEffect((): void => {
    const target: HTMLElement | null = document.getElementById(id);
    if (!target) return;
    target.addEventListener("click", (): void => {
      target.style.animationPlayState = "paused";
    });
    target.style.animation = "running";
  }, [data]);
  const { name, desc }: SkillData = data;
  const style: TailwindProperties = {
    xl: "xl:w-96 xl:ml-8  xl:pb-8  xl:flex xl:flex-col xl:items-center xl:gap-8",
    base: "bg-neutral-200 bg-opacity-75 _swash-in",
  };
  return (
    <section className={`${style.xl} ${style.base} ${className}`} id={id}>
      <WindowPanel />
      <div className="w-40 h-40 rounded-full bg-black" />
      <div className="flex flex-col gap-4 items-center">
        <h1 className="text-lg font-bold">{name}</h1>
        <h2 className="text-base font-normal">hello</h2>
        <p className="text-base font-normal">{desc}</p>
      </div>
    </section>
  );
}
export default SKillCard;
Tags:

2

Answers


  1. 0

    you have to modify the useEffect hook to make your react component SkillCard. whenever you click on or change its props, restart its animation. to each skillcard assign a unique id based on the data. by this the component recognizes it as a new instance. When the data changes use the dependency array to trigger re-animation, also change the animation logic to useEffect. Here is the example:

    function SkillCard({ data, className }) {
  // Create a unique ID based on data
  const id = `skillcard-${data.id}`; 


  useEffect(() => {
    const target = document.getElementById(id);
    if (!target) return;


    // Restart the animation
    target.style.animation = 'none';
    setTimeout(() => {
      target.style.animation = '';
    }, 10);


    // You can add event listeners or other logic here
  }, [data]); // Dependency array includes data, so it re-runs when data changes


  // Render your component here
}
    Login or Signup to reply.
  2. 0

    You’ve to trigger animation in the useEffect only if the element is animating already. Make an animationStatus state and modify it when you start the animation (here, in the event handler) & add the respective checks in useEffect. Hope this helps

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search