Use of CSS

This is how I usually use it, to create animations you only need to use css to change the properties of the element in conjunction with the transition property. It can help me do most of the necessary animations like fadeIn, fadeOut, slideIn, slideOut, … Using CSS only has difficulty when your animation is too complicated, combining many steps or calculating. math based on user interaction. However, combining it with ReactJS makes this usage a lot stronger.

Below is a simple example in the form of toggle and how you can from this example create your own animations:

A simple animation, when you click on the search icon, the input box will appear from left to right. You can see the code below to know how I did:

On the Input tab when clicking on Icon, the variable on will change. If true, adds class show to the Input tag.

You may have noticed that initially the input with only with 0px after adding the show class would be 150px, combined with the transition property to create the effect you had an animation that looked like Medium ^^

If you don’t know the transition attribute, this is an attribute that indicates how long and when you change a CSS property. Its syntax is:

In my example, all refers to the effect that will occur in all properties, you can also specify specific properties such as width, height, transform, opacity, ……. 1s is about show time effects. Ease is timing-function, which will describe how the transition will evolve over time. The ease example means you will start the effect slowly, then quickly, and then end slowly again.

You can learn more about transitions here https://www.w3schools.com/css/css3_transitions.asp

The way you can do animations is like this:

1. Identify actions that create animation.
2. Which element of you will change.
3. How the element will change.

In my example, the user click Icon is the action of creating animation, in addition, it may be when the user has just loaded the page, typed the keyboard, scrolled the mouse, …. The change element is the Input box, in my example is simply an Input box but you can make changes on many different elements at the same time, with ReactJS, this is quite simple.

I changed the input box’s input from 0px to 150px. This is how I change the element. You can also find CSS properties that transitions can work here https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

You can make your own examples to better understand and combine the animations to your liking. Practicing from small examples will help you a lot if you want to make complicated and beautiful animations online

Below is another example I use animation attribute in CSS:

Hook animate

When encountering some situations that can not change the CSS (for example, when you want to scroll smoothly), or need to adjust the time, I use this method. This is just a hook I wrote myself, there are many other libraries that will have similar functions.

Hook takes two parameters:

• Duration: The duration of the effect.
• Process: This function will be like the timing-function above, you can learn about the bezier curve , and the bezier-easing library.

It will return 3 values:

• Time: the length of time the effect took place.
• Fraction: The ratio of time to action and the duration of the effect (time / duration) .
• Start: Call this function will start running the effect.

Actually, depending on how I use it, I will fix it accordingly

Clone a UI Animation on Pinterest

This is a pretty nice effect that I see on Pinterest. Found it beautiful, so also try to try but not genuine oysters ^^

Genuine goods

Link on Pinterest: https://www.pinterest.com/pin/843158361471238865/

Homemade goods

Link on CodeSandBox: https://codesandbox.io/s/nifty-montalcini-rsu5m

I have used the library https://www.react-spring.io/ to align the time. This is a fairly famous library and provides many utility functions that you can also use …

summary

The article is my way to create an animation on ReactJS. Hope to be able to help you when you need to work with Animation.