I needed to make a simple animation for a side-project. I originally started off wanting to either make a bouncing ball or have two balls cross over beneath the title post. I decided to go with the latter and I didn’t want to use JavaScript for this, just pure CSS.

The codepen for this project can be found here.

There were three main steps:

1. Make a ball
2. Give the ball a shadow
3. Put the ball inside a container 
4. Make the ball move back and forth at a certain speed
5. Repeat the above with a second ball

Some key CSS features that came in handy to make the ball were the following properties:

display: block // to get you started with making a circle
border-radius: 50% // to make it into a circle
box-shadow: inset -5px -5px 5px rgba(0,0,0,.6) 

I used keyframes to get the two balls to move in a horizontal direction along a ‘X’ axis. The container had a width of 500px and the balls needed to move from point A to point B which were both equidistant from the centre. So I went with point A = 200px and point B = 300px. In my actual project I modified it so that it would line up correctly with the content above. The function I used for this (for Firefox):

@-moz-keyframes moveX {
  from { left: 200px; } to { left: 300px; }
}

And for the animation (for Firefox):

-moz-animation: moveX 1.5s linear 0s infinite alternate;

The ‘alternate’ property is important to make the ball move smoothly from point A - B - A otherwise it makes for a patchy movement pattern where the ball reappears at point A without moving across from B - A.

The question I faced repeatedly was do you set up components as classes or functions. The official docs blog says:

“When a component is defined as a class, it is a little bit more powerful than a function component. It can store some local state and perform custom logic when the corresponding DOM node is created or destroyed.

A function component is less powerful but is simpler, and acts like a class component with just a single render() method. Unless you need features available only in a class, we encourage you to use function components instead.

However, whether functions or classes, fundamentally they are all components to React. They take the props as their input, and return the elements as their output.”

For example - for something as simple as a navbar - which do you go by? Do you set up the navbar as a functional component and have less features or a class component where you leave the door open for addition future features.

Another really good explanation was in this article. The advantage of using a class component is that it has a state and has more features as opposed to functional component which is stateless and ‘read-only’.

For something like a navbar which I don’t expect to change in the near future - I decided to go with function component. However the Home page for this webapp is currently a class component because for now I want to keep the door open for future addition of features.