Skip to content

Commit 6e6f0bf

Browse files
ajay-dhangarajay-dhangar
authored
Merge pull request #354 from yashi-15/scroll-animations
Fade scroll animations added.
2 parents 0428cfb + c96e7c7 commit 6e6f0bf

File tree

7 files changed

+442
-71
lines changed

7 files changed

+442
-71
lines changed

‎package-lock.json

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

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,8 @@
6161
"devDependencies": {
6262
"@docusaurus/module-type-aliases": "^3.3.2",
6363
"@docusaurus/types": "^3.3.2",
64-
"dotenv": "^16.4.5"
64+
"dotenv": "^16.4.5",
65+
"framer-motion": "^11.2.10"
6566
},
6667
"browserslist": {
6768
"production": [

‎src/components/Aboutpage/index.tsx

Lines changed: 65 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from "react";
22
import clsx from "clsx";
33
import Heading from "@theme/Heading";
44
import styles from "./styles.module.css";
5-
5+
import { motion } from "framer-motion";
66
const aboutImg = "/img/svg/about_me.svg";
77

88
export default function AboutUsSection() {
@@ -11,21 +11,77 @@ export default function AboutUsSection() {
1111
<div className="container">
1212
<div className="row">
1313
<div className="col col--6">
14+
<motion.div
15+
initial={{ opacity: 0, x: -150 }}
16+
whileInView={{ opacity: 1, x: 0 }}
17+
viewport={{ once: true }}
18+
transition={{
19+
duration: 1,
20+
type: "spring",
21+
stiffness: 100,
22+
delay: 0.2,
23+
}}
24+
>
1425
<Heading as={"h1"}>About Us</Heading>
15-
<p className={styles.aboutUsDescription}>
26+
</motion.div>
27+
<motion.p
28+
initial={{ opacity: 0, y: -150 }}
29+
whileInView={{ opacity: 1, y: 0 }}
30+
viewport={{ once: true }}
31+
transition={{
32+
duration: 1,
33+
type: "spring",
34+
stiffness: 100,
35+
delay: 0.5,
36+
}}
37+
className={styles.aboutUsDescription}
38+
>
1639
Welcome to Code Harbor Hub, your go-to destination for quality tech education. At Code Harbor Hub, we are passionate about empowering individuals with the knowledge and skills needed to thrive in the ever-evolving world of technology.
17-
</p>
18-
<p className={styles.aboutUsDescription}>
40+
</motion.p>
41+
<motion.p
42+
initial={{ opacity: 0, y: -150 }}
43+
whileInView={{ opacity: 1, y: 0 }}
44+
viewport={{ once: true }}
45+
transition={{
46+
duration: 1,
47+
type: "spring",
48+
stiffness: 100,
49+
delay: 0.5,
50+
}}
51+
className={styles.aboutUsDescription}
52+
>
1953
Our mission is to provide accessible and comprehensive educational resources to learners of all levels, from beginners to advanced professionals. Whether you're looking to kickstart your career in web development, master a new programming language, or stay updated on the latest tech trends, we've got you covered.
20-
</p>
21-
<p className={styles.aboutUsDescription}>
54+
</motion.p>
55+
<motion.p
56+
initial={{ opacity: 0, y: -150 }}
57+
whileInView={{ opacity: 1, y: 0 }}
58+
viewport={{ once: true }}
59+
transition={{
60+
duration: 1,
61+
type: "spring",
62+
stiffness: 100,
63+
delay: 0.5,
64+
}}
65+
className={styles.aboutUsDescription}
66+
>
2267
With a team of experienced instructors and industry experts, we offer a diverse range of courses and learning paths tailored to meet your specific goals and interests. Join our community today and embark on your journey towards success in the tech industry!
23-
</p>
68+
</motion.p>
2469
</div>
25-
<div className={clsx("col", "col--6", styles.aboutUsImage)}>
70+
<motion.div
71+
initial={{ scale: 0, y: -150 }}
72+
whileInView={{ scale: 0.8, y: 0 }}
73+
viewport={{ once: true }}
74+
transition={{
75+
duration: 1,
76+
type: "spring",
77+
stiffness: 100,
78+
delay: 0.5,
79+
}}
80+
className={clsx("col", "col--6", styles.aboutUsImage)}
81+
>
2682
{/* Placeholder for an about us image */}
2783
<img src={aboutImg} alt="About Us" />
28-
</div>
84+
</motion.div>
2985
</div>
3086
</div>
3187
</section>

‎src/components/HomePage/Header.tsx

Lines changed: 54 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React, { useEffect, useRef } from "react";
33
import "./header.css";
44
import Link from "@docusaurus/Link";
55
import VanillaTilt from "vanilla-tilt";
6+
import { motion } from "framer-motion";
67

78
/**
89
* Renders the header component of the application.
@@ -12,25 +13,58 @@ import VanillaTilt from "vanilla-tilt";
1213
const HeaderContent = () => {
1314
return (
1415
<div className="chh__header-content">
15-
<h1 className="gradient__text">Level Up Skills with CodeHarborHub</h1>
16-
<p>
16+
<h1 className="gradient__text"
17+
>Level Up Skills with CodeHarborHub</h1>
18+
<motion.p
19+
initial={{ opacity: 0, x: -150 }}
20+
whileInView={{ opacity: 1, x: 0 }}
21+
viewport={{ once: true }}
22+
transition={{
23+
duration: 1,
24+
type: "spring",
25+
stiffness: 100,
26+
delay: 0.2,
27+
}}
28+
>
1729
Tired of limitations? CodeHarborHub shatters them. We&apos;re the
1830
exclusive platform offering a comprehensive tech curriculum, taught by
1931
industry masters, completely free. Join our vibrant community, master
2032
in-demand skills, and launch your dream tech career.
21-
</p>
33+
</motion.p>
2234

2335
<div className="chh__header-content__input">
24-
<button type="button">
36+
<motion.button
37+
initial={{ opacity: 0, x: -150 }}
38+
whileInView={{ opacity: 1, x: 0 }}
39+
viewport={{ once: true }}
40+
transition={{
41+
duration: 1,
42+
type: "spring",
43+
stiffness: 100,
44+
delay: 0.5,
45+
}}
46+
type="button"
47+
>
2548
<Link to="/docs" className="chh__header-content__input--link">
2649
Get Started
2750
</Link>
28-
</button>
29-
<button type="button">
51+
</motion.button>
52+
<motion.button
53+
initial={{ opacity: 0, x: 150 }}
54+
whileInView={{ opacity: 1, x: 0 }}
55+
viewport={{ once: true }}
56+
transition={{
57+
duration: 1,
58+
type: "spring",
59+
stiffness: 100,
60+
delay: 0.5,
61+
}}
62+
type="button"
63+
>
3064
<Link to="/courses" className="chh__header-content__input--link">
3165
Courses
3266
</Link>
33-
</button>
67+
</motion.button>
3468
</div>
3569
</div>
3670
);
@@ -62,15 +96,26 @@ const HeaderImage = () => {
6296
}, []);
6397

6498
return (
65-
<div className="chh__header-image">
99+
<motion.div
100+
initial={{ scale: 0, x: 150 }}
101+
whileInView={{ scale: 0.8, x: 0 }}
102+
viewport={{ once: true }}
103+
transition={{
104+
duration: 1,
105+
type: "spring",
106+
stiffness: 100,
107+
delay: 0.5,
108+
}}
109+
className="chh__header-image"
110+
>
66111
<img
67112
src="/img/hero-img.png"
68113
alt="ai"
69114
className="float-animation"
70115
data-tilt
71116
ref={imgRef}
72117
/>
73-
</div>
118+
</motion.div>
74119
);
75120
};
76121

‎src/pages/contact/index.tsx

Lines changed: 63 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Layout from "@theme/Layout";
22
import styles from "./Contact.module.css";
33
import React, { useState, ChangeEvent, FormEvent } from "react";
4+
import { motion } from "framer-motion";
45

56
interface FormValues {
67
fullName: string;
@@ -46,15 +47,47 @@ export default function Contact(): JSX.Element {
4647
<div className={styles.main__contact_contains_left}>
4748
<div className={styles.main__contact_ud_wrapper}>
4849
<div className={styles.ud_contact_title}>
49-
<span className={styles.contact_us}>
50+
<motion.span
51+
initial={{ opacity: 0, x: -150 }}
52+
whileInView={{ opacity: 1, x: 0 }}
53+
viewport={{ once: true }}
54+
transition={{
55+
duration: 1,
56+
type: "spring",
57+
stiffness: 100,
58+
delay: 0.2,
59+
}}
60+
className={styles.contact_us}
61+
>
5062
<b>CONTACT US</b>
51-
</span>
52-
<h2 className={styles.contact_heading}>
63+
</motion.span>
64+
<motion.h2
65+
initial={{ opacity: 0, x: -150 }}
66+
whileInView={{ opacity: 1, x: 0 }}
67+
viewport={{ once: true }}
68+
transition={{
69+
duration: 1,
70+
type: "spring",
71+
stiffness: 100,
72+
delay: 0.5,
73+
}}
74+
className={styles.contact_heading}
75+
>
5376
Let's talk about your problem.
54-
</h2>
77+
</motion.h2>
5578
</div>
5679
<div className={styles.contact_info}>
57-
<div className={styles.contact_info_item}>
80+
<motion.div
81+
initial={{ opacity: 0, y: 150 }}
82+
whileInView={{ opacity: 1, y: 0 }}
83+
viewport={{ once: true }}
84+
transition={{
85+
duration: 1,
86+
type: "spring",
87+
stiffness: 100,
88+
delay: 0.5,
89+
}}
90+
className={styles.contact_info_item}>
5891
<div className={styles.icon}>
5992
<svg
6093
width="29"
@@ -72,8 +105,18 @@ export default function Contact(): JSX.Element {
72105
Mandsaur, Madhya Pradesh, India - 458002
73106
</p>
74107
</div>
75-
</div>
76-
<div className={styles.contact_info_item}>
108+
</motion.div>
109+
<motion.div
110+
initial={{ opacity: 0, y: 150 }}
111+
whileInView={{ opacity: 1, y: 0 }}
112+
viewport={{ once: true }}
113+
transition={{
114+
duration: 1,
115+
type: "spring",
116+
stiffness: 100,
117+
delay: 0.5,
118+
}}
119+
className={styles.contact_info_item}>
77120
<div className={styles.icon}>
78121
<svg
79122
width="34"
@@ -90,11 +133,21 @@ export default function Contact(): JSX.Element {
90133
ajaydhyangar49@gmail.com
91134
</p>
92135
</div>
93-
</div>
136+
</motion.div>
94137
</div>
95138
</div>
96139
</div>
97-
<div className={styles.main__contact_contains_right}>
140+
<motion.div
141+
initial={{ opacity: 0, x: 150 }}
142+
whileInView={{ opacity: 1, x: 0 }}
143+
viewport={{ once: true }}
144+
transition={{
145+
duration: 1,
146+
type: "spring",
147+
stiffness: 100,
148+
delay: 0.5,
149+
}}
150+
className={styles.main__contact_contains_right}>
98151
<div className={styles.form_container}>
99152
<h3 className={styles.form_heading}>Send us a Message</h3>
100153
<form onSubmit={handleSubmit}>
@@ -157,7 +210,7 @@ export default function Contact(): JSX.Element {
157210
</div>
158211
</form>
159212
</div>
160-
</div>
213+
</motion.div>
161214
</div>
162215
</div>
163216
</section>

0 commit comments

Comments
 (0)