React Animations 101: CSS transitions – Bjorn Holdt – Medium

React Animations 101: CSS transitions  #javascript #animation #css #react #reactjs

  • Examples with React and CSS transitionsHow do we use CSS transitions in react?Progress bar example (Codepen)Let’s start off with a progress bar first.
  • progress { transition: width 100ms ease-in-out;}Without CSS transitions whenever the progress bar updates, it would expand to its new width immediately.
  • In this case, when the navigation bar is visible the slideIn class is applied, when it is not visible the slideOut class is applied.The Navigation Bar Component (on codepen)const Navbar = ({ visible }) = ( div id=”navbar” className={visible ?
  • slideIn { transform: { transform: translateX(-220px);}Codepen exampleWe use the transform property in CSS to position the navigation bar.
  • slideOut will move the element completely out of view again.With the CSS transition, we tell the browser whenever there is a change to the transform property (in this case when the element’s position is changed), animate the change over 400ms.

If you were to follow my learning path to get a navigation bar animation working with react, you will end up with a combination of react-motion, ReactCSSTransitionGroup, yet-another-react-animation…

@ReactDOM: React Animations 101: CSS transitions #javascript #animation #css #react #reactjs

How do I get a navigation bar to slide in and slide out using react?

If you were to follow my learning path to get a navigation bar animation working with react, you will end up with a combination of react-motion, ReactCSSTransitionGroup, yet-another-react-animation-lib, a lot of head scratching, reading, more head scratching and an overcomplicated solution just to run this simple animation.

However, for the navigation bar to slide in and out, no external library is needed. CSS transitions are a lot simpler and quicker to write up and can be used to create these types of animations. In this post on react animations 101, we will explore a few examples and why CSS transition are a good fit for the navigation bar.

CSS transitions: a quick introduction

CSS transitions tell the browser that it should animate when a property on an element changes. CSS transitions let you decide which properties to animate (i.e. height, color etc.), how long the animation should run for, and how the transition will run (i.e. either slow at the start: ease-in, or slow at start and end: ease-in-out… ) Instead of relying on a javascript library to create all the animation frames that would be needed to create this animation, the browser will take care of that calculation.

In the above example, the browser will react to any changes in transform for the circle. As soon as the position of the circle is changed the animation starts. It runs for 500ms, with a slow start and slow end(ease-in-out) a timing function. (codepen)

Examples with React and CSS transitions

How do we use CSS transitions in react?

Let’s start off with a progress bar first. Whenever we update the progress bar, it shouldn’t jump to its new progress indicator. Instead we want to see a gradual change to the progress bar’s width until it reaches its current progress status.

Progress bar component

In the progress bar component, the width gets changed whenever the progress is updated. A progress of 20% will result in 20% width of the progress bar.

transition: width 100ms ease-in-out;

Without CSS transitions whenever the progress bar updates, it would expand to its new width immediately. Now, every time the width changes, it will transition to the new width in 100ms.

You can explore the progress bar example a bit further in codepen.

Navigation bar sliding in and sliding out

Finally let’s get to the navigation bar. If you are used to jQuery animations, you would use the following imperative approach: $(“#navbar”).slideIn(). The difference to jQuery is that react is declarative. i.e. what does the navigation component look like when it is visible. In this case, when the navigation bar is visible the slideIn class is applied, when it is not visible the slideOut class is applied.

React Animations 101: CSS transitions – Bjorn Holdt – Medium