Skip to content

Commit dcba8c5

Browse files
chromium7chromium7
committed
Add animation in landing page
Use animate.css instead of building new css animations from scratch. Create a containment component for the animation.
1 parent 52fe17f commit dcba8c5

File tree

11 files changed

+126
-81
lines changed

11 files changed

+126
-81
lines changed

‎frontend/package-lock.json‎

Lines changed: 19 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,10 @@
2525
},
2626
"dependencies": {
2727
"@babel/plugin-proposal-class-properties": "^7.13.0",
28+
"animate.css": "^4.1.1",
2829
"bootstrap": "^5.0.1",
2930
"popper.js": "^1.16.1",
31+
"react-animate-on-scroll": "^2.1.5",
3032
"react-icons": "^4.2.0",
3133
"react-router-dom": "^5.2.0",
3234
"styled-components": "^5.3.0"

‎frontend/src/components/LandingPage/LandingBody.js‎

Lines changed: 41 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import React from "react";
22
import styled from "styled-components";
3-
import placeholder from "../../../static/images/img-placeholder.jpg";
43
import { FaAccusoft, FaAdjust } from "react-icons/fa";
4+
55
import EndExplore from "../Shared/EndExplore";
6+
import { SlideIn } from "../UI/animation";
7+
import placeholder from "../../../static/images/img-placeholder.jpg";
68

79
const ContainerBig = styled.div`
810
text-align: center;
@@ -12,13 +14,12 @@ const ContainerBig = styled.div`
1214
max-width: 80vw;
1315
}
1416
15-
div {
17+
.inside {
1618
display: flex;
1719
justify-content: space-around;
1820
margin: 4em 0;
1921
20-
section {
21-
animation: var(--animation-slide);
22+
div {
2223
max-width: 40%;
2324
}
2425
@@ -63,7 +64,6 @@ const ContainerMedium = styled.div`
6364
6465
img,
6566
div {
66-
animation: var(--animation-slide);
6767
max-width: 40%;
6868
}
6969
@@ -81,52 +81,58 @@ export default function LandingBody() {
8181
<div>
8282
<ContainerBig>
8383
<img src={placeholder} />
84-
<div>
85-
<section>
84+
<div class="inside">
85+
<SlideIn>
8686
<FaAccusoft />
8787
<h4>Hassle free editing</h4>
8888
<p>
8989
Editing photos couldn't be easier. No complicated tools or
9090
confusing UI. Literally just pick the effects that you want in
9191
your picture and our code will do all the hard work for you!
9292
</p>
93-
</section>
94-
<section>
93+
</SlideIn>
94+
95+
<SlideIn>
9596
<FaAdjust />
9697
<h4>Sophisticated image in a jiffy</h4>
9798
<p>
9899
The effects selection we provide will give your image a fresh and
99100
unique look. Through a simple edit, you can stand out from other
100101
people in social media with your refreshing pictures.
101102
</p>
102-
</section>
103+
</SlideIn>
103104
</div>
104105
</ContainerBig>
105-
<ContainerMedium>
106-
<img src={placeholder} />
107-
<div>
108-
<h3>Face detection and many more features</h3>
109-
<p>
110-
Detect faces in a picture, and many other features are available in
111-
the platform and our artificial intelligence system will generate
112-
the iedited image for you.
113-
</p>
114-
<a>Explore all features &rarr;</a>
115-
</div>
116-
</ContainerMedium>
117-
<ContainerMedium>
118-
<div>
119-
<h3>Image manipulation using openCV</h3>
120-
<p>
121-
The artificial intelligence and the business logic of our photo
122-
editing web app is in openCV. The library openCV is used not only
123-
for applying filters but also to do a more advanced task like a face
124-
detection.
125-
</p>
126-
<a>Find out more &rarr;</a>
127-
</div>
128-
<img src={placeholder} />
129-
</ContainerMedium>
106+
<SlideIn>
107+
<ContainerMedium>
108+
<img src={placeholder} />
109+
<div>
110+
<h3>Face detection and many more features</h3>
111+
<p>
112+
Detect faces in a picture, and many other features are available
113+
in the platform and our artificial intelligence system will
114+
generate the iedited image for you.
115+
</p>
116+
<a>Explore all features &rarr;</a>
117+
</div>
118+
</ContainerMedium>
119+
</SlideIn>
120+
<SlideIn>
121+
<ContainerMedium>
122+
<div>
123+
<h3>Image manipulation using openCV</h3>
124+
<p>
125+
The artificial intelligence and the business logic of our photo
126+
editing web app is in openCV. The library openCV is used not only
127+
for applying filters but also to do a more advanced task like a
128+
face detection.
129+
</p>
130+
<a>Find out more &rarr;</a>
131+
</div>
132+
<img src={placeholder} />
133+
</ContainerMedium>
134+
</SlideIn>
135+
130136
<EndExplore
131137
title="Start transforming your photos!"
132138
subtitle="No sign up, skills nor experience required! Start editing now"

‎frontend/src/components/Shared/EndExplore.js‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from "react";
22
import styled from "styled-components";
33

4+
import { SlideIn } from "../UI/animation";
45
import NavButton from "../Buttons/NavButton";
56

67
const Container = styled.div`
@@ -33,17 +34,19 @@ const Container = styled.div`
3334

3435
export default function EndExplore({ title, subtitle, href, invert }) {
3536
return (
36-
<Container>
37-
<div>
38-
<h1>{title}</h1>
39-
<h5>{subtitle}</h5>
40-
<NavButton
41-
text="Get started"
42-
href={href}
43-
invert={invert}
44-
shadow={true}
45-
/>
46-
</div>
47-
</Container>
37+
<SlideIn>
38+
<Container>
39+
<div>
40+
<h1>{title}</h1>
41+
<h5>{subtitle}</h5>
42+
<NavButton
43+
text="Get started"
44+
href={href}
45+
invert={invert}
46+
shadow={true}
47+
/>
48+
</div>
49+
</Container>
50+
</SlideIn>
4851
);
4952
}

‎frontend/src/components/UI/animation.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from "react";
2+
import ScrollAnimation from "react-animate-on-scroll";
3+
4+
export function SlideIn(props) {
5+
return (
6+
<ScrollAnimation
7+
animateIn="animate__fadeInUp"
8+
duration="0.8"
9+
offset="100"
10+
animateOnce={true}
11+
>
12+
{props.children}
13+
</ScrollAnimation>
14+
);
15+
}

‎frontend/src/components/UI/animations.js‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎frontend/src/components/UI/globalStyles.js‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { createGlobalStyle } from "styled-components";
2-
import { slideIn } from "../UI/animations";
32

43
export const GlobalStyles = createGlobalStyle`
54
html {
@@ -21,10 +20,5 @@ export const GlobalStyles = createGlobalStyle`
2120
--shadow-secondary: 0 4px 16px 0 var(--color-primary);
2221
2322
--text-title: montserrat, Arial, Helvetica, sans-serif;
24-
25-
--animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
26-
--animation-duration: 1s;
27-
28-
--animation-slide: ${slideIn} var(--animation-duration) var(--animation-timing-function);
2923
}
3024
`;

‎frontend/src/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,6 @@ import ReactDOM from "react-dom";
33
import App from "./components/App";
44
import "bootstrap/dist/css/bootstrap.min.css";
55
import "bootstrap/dist/js/bootstrap.bundle.min";
6+
import "animate.css/animate.min.css";
67

78
ReactDOM.render(<App />, document.getElementById("app"));

‎frontend/static/frontend/main.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/static/frontend/main.js.LICENSE.txt‎

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@
1818
!*** ./node_modules/react-is/index.js ***!
1919
\****************************************/
2020

21+
/*!****************************************!*\
22+
!*** ./src/components/UI/animation.js ***!
23+
\****************************************/
24+
2125
/*!*****************************************!*\
2226
!*** ./node_modules/react-dom/index.js ***!
2327
\*****************************************/
@@ -34,9 +38,9 @@
3438
!*** ./src/components/Header/Header.js ***!
3539
\*****************************************/
3640

37-
/*!*****************************************!*\
38-
!*** ./src/components/UI/animations.js ***!
39-
\*****************************************/
41+
/*!******************************************!*\
42+
!*** ./node_modules/prop-types/index.js ***!
43+
\******************************************/
4044

4145
/*!*******************************************!*\
4246
!*** ./src/components/UI/globalStyles.js ***!
@@ -62,6 +66,14 @@
6266
!*** ./src/components/Shared/EndExplore.js ***!
6367
\*********************************************/
6468

69+
/*!***********************************************!*\
70+
!*** ./node_modules/lodash.throttle/index.js ***!
71+
\***********************************************/
72+
73+
/*!**************************************************!*\
74+
!*** ./node_modules/animate.css/animate.min.css ***!
75+
\**************************************************/
76+
6577
/*!**************************************************!*\
6678
!*** ./node_modules/react-icons/fa/index.esm.js ***!
6779
\**************************************************/
@@ -106,6 +118,14 @@
106118
!*** ./node_modules/react-icons/lib/esm/iconsManifest.js ***!
107119
\***********************************************************/
108120

121+
/*!*************************************************************!*\
122+
!*** ./node_modules/prop-types/factoryWithThrowingShims.js ***!
123+
\*************************************************************/
124+
125+
/*!*************************************************************!*\
126+
!*** ./node_modules/prop-types/lib/ReactPropTypesSecret.js ***!
127+
\*************************************************************/
128+
109129
/*!**************************************************************!*\
110130
!*** ./node_modules/react-is/cjs/react-is.production.min.js ***!
111131
\**************************************************************/
@@ -134,6 +154,10 @@
134154
!*** ./node_modules/@emotion/unitless/dist/unitless.browser.esm.js ***!
135155
\*********************************************************************/
136156

157+
/*!**************************************************************************!*\
158+
!*** ./node_modules/react-animate-on-scroll/dist/scrollAnimation.min.js ***!
159+
\**************************************************************************/
160+
137161
/*!****************************************************************************!*\
138162
!*** ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js ***!
139163
\****************************************************************************/
@@ -150,6 +174,10 @@
150174
!*** ./node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js ***!
151175
\**********************************************************************************/
152176

177+
/*!****************************************************************************************!*\
178+
!*** ./node_modules/css-loader/dist/cjs.js!./node_modules/animate.css/animate.min.css ***!
179+
\****************************************************************************************/
180+
153181
/*!*************************************************************************************************!*\
154182
!*** ./node_modules/css-loader/dist/cjs.js!./node_modules/bootstrap/dist/css/bootstrap.min.css ***!
155183
\*************************************************************************************************/

0 commit comments

Comments
 (0)