# Animation using React in Random Quote Machine

**URL:** <https://forum.freecodecamp.org/t/animation-using-react-in-random-quote-machine/237626>\
**Category:** General\
**Created:** [November 2, 2018, 3:53pm UTC](https://forum.freecodecamp.org/t/animation-using-react-in-random-quote-machine/237626 "2018-11-02T15:53:42Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![lamnhh](https://avatars.discourse-cdn.com/v4/letter/l/85f322/32.png) [@lamnhh](https://forum.freecodecamp.org/u/lamnhh)\
**Post date:** [November 2, 2018, 3:53pm UTC](https://forum.freecodecamp.org/t/animation-using-react-in-random-quote-machine/237626/1 "2018-11-02T15:53:42Z")

</div>

I’ve finished almost every feature required for this project, except for the animation seen in the sample project they provided. Those animations would easily be done using jQuery, but I have no idea how to do the same thing in React.

More specifically, what I have right now and what I need to do is:

- I have a component QuoteBox, which contains a p containing the quote, a button to randomly select a new quote.

- I have a component QuoteMachineApp that render QuoteBox along with a Footer component inside a div classed “containers”.

- Now I need some way to trigger animation on the p (fade out, change text color, then fade in), and on the background of the div “containers” (change background color); both of these animations triggered when the button is clicked.

Thank you very much.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 17, 2021, 8:08pm UTC](https://forum.freecodecamp.org/t/animation-using-react-in-random-quote-machine/237626/2 "2021-01-17T20:08:58Z")

</div>

Closed on January 17, 2021, 8:08pm UTC