React: React Animation

React Animation

In react there is different animation framework. Animation includes fade, flip, zoom, rotate and lot of more advanced animation. We have demo code to know how animation works; we have one small component file-:

As you have different component files that is different sections containing title and description. Now through code representation of these three sections on one page using react animation-:

		Import React, {Component} from ‘react’;
		Import {Transition, animate} from ‘react’;
		Import Component1 from 1)react-dom
		‘./components’/component;1)react-scripts
		Import Component2 from 1)react-spring
		‘./components/component2’;
		Import ‘./App.css’;
		Import Component3 from ‘./components/Component3’;
		Import ‘./App.css’;
		Class App extends Component {
		 State = {
		   showComponent3: false
		}
		Toggle = c => this.setState({ showComponent3:
		!this.state.showComponent3 });
		Render() {
		Return (
		< div classname=”App”>
		< Component1 />
		< Component2 toggle=(this.toggle)/>
		< Transition Native Items=(this.state.showComponent3) From={{ opacity: 0 }} Enter={{ opacity: 1 }} Leave={{ opacity: 0}} >
		{show => show && (props => (
		< animated.div style={props}>
		< /animated.div>
		})}
		< /Transition>
		< /div>
		);

Animations are the illusion of motion or change over time. So, for example shopping cart different things happen on screen which shown to user like scrolling adds, pop ups etc. all done with animation code. With toggle function when things move around, pull down fashion news feed, pulling something with fingers across screen etc.

Why use animation?

1. Animations used in Feedback by users like validation on text input with respective expressions.
2. Progress bar shown with graphical structure.
3. Another use is for engaging and fun. It includes like scrolling of pages like scroll triggered animation.
4. It is used in orientation or spatial orientation as to show informative data through pictures videos and moving screen functions all done with animation.

As in above image “Appear Enter/Leave SearchBox” when you move cursor and bring on “Appear” then it it becomes darker and thicker it done with animation.

How code look like-:

In different CSS file opacity is used to blur the content or image. Another transition property is used part of animation.

Apply now for Advanced React Js Course