How To Do Smooth Transitions

Hi! I have just finished my Random Quote Machine, I appreciate some feedback. Also if someone could give me some tips about transitions it would be great, as I would like to make transitions smoothly.

I am trying to get the first quote without any jumps and then trying to do like a fade in/fade out transition, but everything I get is bumpy.

Thanks :slight_smile:

You can write your own transitions either using javaScript or CSS; When using css you will hide/show element using JS and css transitions will do its work. I would always recommend CSS way, because its fast and much smooth and less hassle.
Main idea:

  • Remove active (could be anything) class from quote container element (quote-container) when ajax starts
  • Show some progress during ajax call
  • Add active class to container again using JS when ajax finished

and in your css:

.quote-container{
  opacity: 0;
  transition: opacity 1s ease-out;
}

.active{
  opacity: 1;
}

I hope you get the idea. For complex transitions or animations there are third-party libs available but i would not recommend using these until you get idea of transitions/animations yourself.

1 Like

Thank you so much! I will try this out! :slight_smile: