Skip to content

Commit 1722da3

Browse files
RahulScriptedRahulScripted
committed
Done
1 parent 93b95ee commit 1722da3

File tree

5 files changed

+161
-59
lines changed

5 files changed

+161
-59
lines changed

‎src/App.jsx

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,23 +14,29 @@ import QuickSort from "./components/Algorithm/QuickSort/QuickSort";
1414
import RadixSort from "./components/Algorithm/RadixSort/RadixSort";
1515
import CountingSort from "./components/Algorithm/CountingSort/CountingSort";
1616
import ScrollToTop from "./components/ScrollToTop/ScrollToTop";
17-
import { useEffect, useState } from "react";
17+
import { useRef, useState } from "react";
1818
import PreLoader from "./components/Preloader/PreLoader";
19+
import PageTransition from "./pages/PageTransactions";
20+
import gsap from "gsap";
1921

2022
function App() {
2123
// Hooks
22-
const [loading, setLoading] = useState(true);
23-
useEffect(() => {
24-
setTimeout(() => setLoading(false), 5000);
25-
}, []);
24+
const [loading, setLoading] = useState(false);
25+
const contentRef = useRef()
26+
27+
28+
const handlePreloaderComplete = () => {
29+
setLoading(true);
30+
};
2631

2732
return (
2833
<div className="relative flex flex-col gap-20 bg-black text-white w-full min-h-screen p-5 sm:p-7 md:p-10">
2934
{/* For Preloading */}
30-
{loading ? (
31-
<PreLoader />
35+
{!loading ? (
36+
<PreLoader onComplete={handlePreloaderComplete} />
3237
) : (
3338
<>
39+
<PageTransition contentRef={contentRef} />
3440
<div className="fixed z-10 bottom-5 left-5">
3541
<BuyMeCoffee />
3642
</div>

‎src/components/Algorithm/Sorting/Sorting.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313

1414
// Generate according to screen size
1515
const getBarCount = () => {
16+
if(window.innerWidth >1024) return 25;
1617
if (window.innerWidth > 768) return 20;
1718
if (window.innerWidth > 480) return 10;
1819
else return 5;

‎src/components/Preloader/PreLoader.jsx

Lines changed: 50 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,61 @@
1-
import React, { useEffect, useRef } from 'react';
2-
import { gsap } from 'gsap';
1+
import React, { useState, useEffect } from 'react';
2+
import { gsap, CSSPlugin, Expo } from 'gsap';
33

4-
const sentence = "Sorting bugs, not just arrays";
4+
gsap.registerPlugin(CSSPlugin);
55

6-
const PreLoader = () => {
7-
const loaderRef = useRef(null);
8-
const lettersRef = useRef([]);
6+
const PreLoader = ({ onComplete }) => {
7+
const [counter, setCounter] = useState(0);
98

109
useEffect(() => {
11-
const tl = gsap.timeline();
10+
const count = setInterval(() => {
11+
setCounter((prev) =>
12+
prev < 100
13+
? prev + 1
14+
: (clearInterval(count), setCounter(100), reveal())
15+
);
16+
}, 75);
17+
}, []);
1218

13-
tl.fromTo(
14-
lettersRef.current,
15-
{
16-
y: 50,
17-
opacity: 0,
19+
const reveal = () => {
20+
const tl = gsap.timeline({
21+
onComplete: () => {
22+
onComplete();
1823
},
19-
{
20-
y: 0,
21-
opacity: 1,
22-
stagger: 0.05,
23-
ease: 'back.out(1.7)',
24-
duration: 0.6,
25-
}
26-
).to(
27-
loaderRef.current,
28-
{
29-
y: '-100%',
30-
duration: 1,
31-
scale: 0.8,
32-
delay: 1.5,
33-
ease: 'power3.inOut',
34-
}
35-
);
36-
}, []);
24+
});
25+
26+
tl.to('.follow', {
27+
width: '100%',
28+
ease: Expo.easeInOut,
29+
duration: 1.2,
30+
delay: 0.7,
31+
})
32+
.to('.hide', { opacity: 0, duration: 0.3 })
33+
.to('.hide', { display: 'none', duration: 0.3 })
34+
.to('.follow', {
35+
height: '100%',
36+
ease: Expo.easeInOut,
37+
duration: 0.7,
38+
delay: 0.5,
39+
})
40+
.to('.content', {
41+
width: '100%',
42+
ease: Expo.easeInOut,
43+
duration: 0.7,
44+
});
45+
};
3746

3847
return (
39-
<div
40-
ref={loaderRef}
41-
className="fixed top-0 left-0 w-full h-screen bg-black text-white flex items-center justify-center z-50"
42-
>
43-
<h1 className="text-3xl md:text-5xl font-bold tracking-wide flex flex-wrap justify-center">
44-
{sentence.split('').map((char, index) => (
45-
<span
46-
key={index}
47-
ref={(el) => (lettersRef.current[index] = el)}
48-
className={`inline-block ${char === ' ' ? 'mx-1' : ''}`}
49-
>
50-
{char === ' ' ? '\u00A0' : char}
51-
</span>
52-
))}
53-
</h1>
48+
<div className="absolute inset-0 z-50 bg-black flex items-center justify-center overflow-hidden content">
49+
50+
{/* Progress Bar */}
51+
<div className="relative w-full h-full flex items-center justify-center">
52+
<div className="absolute top-0 left-0 bg-violet-500 h-[5px] w-0 follow z-20" />
53+
<div
54+
className="absolute top-0 left-0 bg-white h-[5px] hide z-10"
55+
style={{ width: `${counter}%` }}
56+
/>
57+
<p className='text-[100px] hide'>{counter}%</p>
58+
</div>
5459
</div>
5560
);
5661
};

‎src/pages/Home.jsx

Lines changed: 54 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,65 @@
1-
import React from 'react'
1+
import React, { useEffect, useRef } from 'react'
2+
import { gsap } from 'gsap'
3+
import { ScrollTrigger } from 'gsap/ScrollTrigger'
4+
5+
// Import sections
26
import WhyUs from '../components/WhyUS/WhyUs'
37
import SortingAlgorithmCard from '../components/Algorithm/SortingCardForHome/SortingAlgorithmCard'
48
import Faq from '../components/FAQ/Faq'
59
import HeroSection from '../components/Hero/HeroSection'
610
import ComparisonBetweenAlgorithm from '../components/Comparison/ComparisonBetweenAlgorithm'
711

12+
gsap.registerPlugin(ScrollTrigger)
13+
814
const Home = () => {
15+
const heroRef = useRef()
16+
const whyUsRef = useRef()
17+
const cardRef = useRef()
18+
const compareRef = useRef()
19+
const faqRef = useRef()
20+
21+
useEffect(() => {
22+
const animateSection = (ref, direction = 50) => {
23+
gsap.fromTo(
24+
ref.current,
25+
{ y: direction, opacity: 0 },
26+
{
27+
y: 0,
28+
opacity: 1,
29+
duration: 1,
30+
ease: 'power3.out',
31+
scrollTrigger: {
32+
trigger: ref.current,
33+
start: 'top 80%',
34+
},
35+
}
36+
)
37+
}
38+
39+
animateSection(heroRef, 100)
40+
animateSection(whyUsRef, 50)
41+
animateSection(cardRef, 50)
42+
animateSection(compareRef, 50)
43+
animateSection(faqRef, 50)
44+
}, [])
45+
946
return (
10-
<div className='flex items-center justify-center w-full min-h-screen gap-32 flex-col'>
11-
<HeroSection />
12-
<WhyUs />
13-
<SortingAlgorithmCard />
14-
<ComparisonBetweenAlgorithm />
15-
<Faq />
47+
<div className="flex items-center justify-center w-full min-h-screen gap-32 flex-col">
48+
<div ref={heroRef}>
49+
<HeroSection />
50+
</div>
51+
<div ref={whyUsRef}>
52+
<WhyUs />
53+
</div>
54+
<div ref={cardRef}>
55+
<SortingAlgorithmCard />
56+
</div>
57+
<div ref={compareRef}>
58+
<ComparisonBetweenAlgorithm />
59+
</div>
60+
<div ref={faqRef}>
61+
<Faq />
62+
</div>
1663
</div>
1764
)
1865
}

‎src/pages/PageTransactions.jsx

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React, { useEffect, useRef } from "react";
2+
import { useLocation } from "react-router-dom";
3+
import { gsap, Power2 } from "gsap";
4+
5+
const PageTransition = ({ contentRef }) => {
6+
const location = useLocation();
7+
const divsRef = useRef([]);
8+
9+
useEffect(() => {
10+
const divs = divsRef.current;
11+
const tl = gsap.timeline();
12+
13+
// Slide down bars
14+
tl.staggerTo(divs, 0.5, { bottom: "0%", ease: Power2.easeIn }, 0.2)
15+
16+
.to({}, { duration: 0.4 })
17+
18+
// Slide bars back up
19+
.staggerTo(divs, 0.5, { bottom: "100%", ease: Power2.easeOut }, 0.2)
20+
21+
// After animation, fade-in main content
22+
.to(contentRef?.current, {
23+
autoAlpha: 1,
24+
duration: 0.6,
25+
ease: Power2.easeOut,
26+
}, "-=0.3");
27+
}, [location.pathname, contentRef]);
28+
29+
return (
30+
<div className="page-transition fixed top-0 left-0 w-full h-full z-[9999] pointer-events-none">
31+
{[0, 1, 2, 3, 4].map((i) => (
32+
<div
33+
key={i}
34+
ref={(el) => (divsRef.current[i] = el)}
35+
className="bar-div fixed h-full w-[20%] bg-violet-500 bottom-full"
36+
style={{ left: `${i * 20}%` }}
37+
/>
38+
))}
39+
</div>
40+
);
41+
};
42+
43+
export default PageTransition;

0 commit comments

Comments
 (0)