Scribd
Upload
44 views

Exercise 46 - React Animation Components

This document discusses adding animations to a React app using the react-animation-components library. It describes installing the library, importing animation components like FadeTransform and Stagger, and implementing them on Card and list elements to smoothly fade and stagger their appearance. The goals are to learn how to subtly animate the app using this library.

Uploaded by

Nguyễn Mạnh Thắng
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
44 views

Exercise 46 - React Animation Components

This document discusses adding animations to a React app using the react-animation-components library. It describes installing the library, importing animation components like FadeTransform and Stagger, and implementing them on Card and list elements to smoothly fade and stagger their appearance. The goals are to learn how to subtly animate the app using this library.

Uploaded by

Nguyễn Mạnh Thắng
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

React Animation Components

Objectives and Outcomes


In this exercise you will learn to use react-animation-components to add more subtle animations to your
React app. At the end of this exercise you will be able to:

 Use react-animation-components to add more subtle animations to your React app.

Installing React-Animation-Components
 Install react-animation-components into your React app as follows:

yarn add [email protected]

yarn add [email protected]

Adding Animations
 Open HomeComponents.js and update as follows:

 ...

 import { FadeTransform } from 'react-animation-components';

 ...

 <FadeTransform
 in
 transformProps={{
 exitTransform: 'scale(0.5) translateY(-50%)'
 }}>
 <Card>
 <CardImg src={baseUrl + item.image} alt={item.name} />
 <CardBody>
 <CardTitle>{item.name}</CardTitle>
 {item.designation ? <CardSubtitle>{item.designation}</CardSubtitle> : null }
 <CardText>{item.description}</CardText>
 </CardBody>
 </Card>
 </FadeTransform>

 ...

 Open DishdetailComponents.js and update it as follows:

 ...

 import { FadeTransform, Fade, Stagger } from 'react-animation-components';

1

 ...

 <FadeTransform
 in
 transformProps={{
 exitTransform: 'scale(0.5) translateY(-50%)'
 }}>
 <Card>
 <CardImg top src={baseUrl + dish.image} alt={dish.name} />
 <CardBody>
 <CardTitle>{dish.name}</CardTitle>
 <CardText>{dish.description}</CardText>
 </CardBody>
 </Card>
 </FadeTransform>

 ...

 <Stagger in>
 {comments.map((comment) => {
 return (
 <Fade in>
 <li key={comment.id}>
 <p>{comment.comment}</p>
 <p>-- {comment.author} , {new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'short', day: '2-
digit'}).format(new Date(Date.parse(comment.date)))}</p>
 </li>
 </Fade>
 );
 })}
 </Stagger>

 ...

 Save all the changes and do a Git commit with the message "React Animation Components".

Conclusions
In this exercise you saw yet another way of adding subtle animations using react-animation-
components.

You might also like