CODEWITHSUNDEEP
reactjssassstyles
Sweet Caramel
Sweet Caramel

Reputation: 226

animate text in React

I'm trying to animate text in React by using scss (probably it doesn't matter). It doesn't work.

In SCSS file:

.animate {
    animation: 3s linear 1s infinite alternate slidein;
}

Aplied on my text:

<h2 className="animate">Order is active.</h2>

Should I do something more? Thanks for the answer!

Upvotes: 1

Views: 10736

Answers (4)

movcmpret
movcmpret

Reputation: 189

You could try to checkout react-animated-text-builders. It's a small lib that supports some text animations. Nothing fancy, but maybe those animations are sufficient for your purposes:

<FloatingLettersTextBuilder
        floatingSpeed={500}
        lettersAppearanceDelay={250}
      > Floating Letters 
</FloatingLettersTextBuilder>

This will slide the text in from right to left.

gif

Upvotes: 0

Techie Sakthi
Techie Sakthi

Reputation: 83

You can handle any kind of animation like low level to high level animation using this npm package built for react. react-transition-group. mountOnEnter is one of the future available in it. which mount the component and start animate based on Boolean condition. These animation states be will handled in class prefix from css followes.

  • entering
  • entered
  • exiting
  • exited

all kind of animation possibilities which are done in animate.css can be handled in above states.

Upvotes: 0

Hoxz
Hoxz

Reputation: 129

You have to use animation with @keyframe. @keyframe specifies what to do, animation when and how https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation2.

Or you can use "transition" with additional class name https://developer.mozilla.org/ru/docs/Web/CSS/transition

Somethin like this:

#scss
.main-class {
   opacity: 1;
   transition: 1s;
}
.hide-classname {
   opacity: 0;
   transition: 1s;
}

#jsx \ tsx
const [hide, setHide] = useState(false)

return(
    <div className={`main-class ${hide ? 'hide-classname' : null}`}>
         i will disappear
    </div>
)

Upvotes: 0

Arda Ravel
Arda Ravel

Reputation: 68

You can use marquee:

<marquee behavior="slide" direction="down">Order is active.</marquee>

For more attributes: https://www.w3schools.in/html-tutorial/marquee-tag/

Upvotes: 1

Related Questions