How to create smooth transitions when rendering new states in React

1

Here’s my project so far: https://codepen.io/DebWeseigner/pen/pogOxEW?editors=0110

I’m wondering how I can create smooth transitions so that when I click the
‘New Quote’ button, all the new elements which are changing with state (the photo, quote text and character) all transtion in smoothly rather than abruptly.

For reference, the example project does it using colors: https://codepen.io/freeCodeCamp/full/qRZeGZ

Thanks!

2

One way to do this is with CSS transitions:

I’m sure if you googled it you could find plenty of JS libraries that will help you do what you want as well.

As for the example project, it is using the jQuery animate method to make those transitions (e.g. see line 52 in the JS file). So if you are including jQuery in your project you have the animate method for free.

1 Like