Pulse causes error

[BroFox86]

Pulse animation causes error in my create-react-app template. Other animations work well.

Code:

import React from "react";
import { setPageInfo } from "../../helpers/setPageInfo";
import { MainLayout } from "../../layouts/MainLayout";
import { Pulse } from "react-awesome-reveal";

export function Animations() {

  setPageInfo( "Animations", "This is animation sandbox." );
 
  return(
    <MainLayout>
      
      <section>
        <Pulse> 
          <h1>Pulse animation</h1>
        </Pulse>
      </section>

    </MainLayout>
  )
}

[morellodev]

Hi @BroFox86, since version 3 all attention seeker animations are wrapped by the AttentionSeeker component, which accept a prop named effect that specifies the animation you want to render: "bounce" | "flash" | "headShake" | "heartBeat" | "jello" | "pulse" | "rubberBand" | "shake" | "shakeX" | "shakeY" | "swing" | "tada" | "wobble".

In your case, you have to refactor your code to:

import React from "react";
import { setPageInfo } from "../../helpers/setPageInfo";
import { MainLayout } from "../../layouts/MainLayout";
import { AttentionSeeker } from "react-awesome-reveal";

export function Animations() {
  setPageInfo( "Animations", "This is animation sandbox." );

  return (
    <MainLayout>
      <section>
        <AttentionSeeker effect="pulse">
          <h1>Pulse animation</h1>
        </AttentionSeeker>
      <section>
    </MainLayout>
  );
}

Let me know if it fixes your issue.

[BroFox86]

@dennismorello, It works! Thank you!