Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(Feature) : Added the Unblur effect #49

Merged
merged 1 commit into from
Oct 17, 2024
Merged

(Feature) : Added the Unblur effect #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 32 additions & 24 deletions my-app/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { useState, useEffect } from "react";
import { motion } from "framer-motion";
import Home from "./pages/Home";
import About from "./pages/About";
import NotFound from "./pages/404";
Expand All @@ -10,37 +11,44 @@ import Base from "./layouts/Base";
import Subscribe from "./components/Subscribe";
import Loader from "./components/Loader";

export default function App() {
const [isVisible, setIsVisible] = useState(false);
// Custom hook to handle the loader
const useLoader = (duration = 1500) => {
const [loading, setLoading] = useState(true);

useEffect(() => {
const timer = setTimeout(() => {
setLoading(false);
}, 1500); // Adjusted loader time to 1.5 seconds for smoother transition
const timer = setTimeout(() => setLoading(false), duration);
return () => clearTimeout(timer); // This is the cleanup timer
}, [duration]);
return loading;
};

return () => clearTimeout(timer); // Cleaning up timer
}, []);

const handleSetVisible = (value) => setIsVisible(value);
export default function App() {
const [isVisible, setVisible] = useState(false);
const loading = useLoader(); // Loader logic

return (
<div className="bg-primary">
{isVisible && <Subscribe handle={handleSetVisible} />}
<Loader loading={loading} />
{isVisible && <Subscribe handle={setVisible} />}
{loading && <Loader loading={loading} />}
{!loading && (
<BrowserRouter>
<Base>
<Routes>
<Route path="/" element={<Home handle={handleSetVisible} />} />
<Route path="/about-us" element={<About handle={handleSetVisible} />} />
<Route path="/community" element={<Community />} />
<Route path="/events" element={<Events />} />
<Route path="/contact-us" element={<ContactForm />} />
<Route path="*" element={<NotFound />} />
</Routes>
</Base>
</BrowserRouter>
<motion.div
initial={{ filter: "blur(10px)" }}
animate={{ filter: "blur(0px)" }}
transition={{ duration: 0.5 }}
className="transition-all duration-400"
>
<BrowserRouter>
<Base>
<Routes>
<Route path="/" element={<Home handle={setVisible} />} />
<Route path="/about-us" element={<About handle={setVisible} />} />
<Route path="/community" element={<Community />} />
<Route path="/events" element={<Events />} />
<Route path="/contact-us" element={<ContactForm />} />
<Route path="*" element={<NotFound />} />
</Routes>
</Base>
</BrowserRouter>
</motion.div>
)}
</div>
);
Expand Down
65 changes: 29 additions & 36 deletions my-app/src/components/Loader.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
// src/components/Loader.jsx

import React, { useEffect, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { motion } from "framer-motion";
import logo from "../assets/images/codex-logo.png";

const Loader = ({ loading }) => {
const Loader = () => {
const [showExplore, setShowExplore] = useState(false);

useEffect(() => {
Expand All @@ -14,40 +16,31 @@ const Loader = ({ loading }) => {
}, []);

return (
<AnimatePresence>
{loading && (
<motion.div
className="flex items-center justify-center h-screen bg-primary"
initial={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -100 }} // Exit animation: fades and slides up
transition={{ duration: 0.5 }}
>
<div className="flex flex-col items-center">
<img src={logo} alt="Logo" className="w-25" />

<div className="relative text-white text-1xl mt-0.5">
<motion.div
className="relative"
initial={{ opacity: 1, y: 0 }}
animate={{ opacity: showExplore ? 0 : 1, y: showExplore ? -20 : 0 }}
transition={{ duration: 0.25 }}
>
We <span className="text-secondary">Code</span>
</motion.div>

<motion.div
className="relative"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: showExplore ? 1 : 0, y: showExplore ? -20 : 0 }}
transition={{ duration: 0.25 }}
>
We <span className="text-secondary">Explore</span>
</motion.div>
</div>
</div>
</motion.div>
)}
</AnimatePresence>
<div className="flex items-center justify-center h-screen bg-primary">
<div className="flex flex-col items-center">
<img src={logo} alt="Logo" className="w-25" />

<div className="relative text-white text-1xl mt-0.5">
<motion.div
className="relative"
initial={{ opacity: 1, y: 0 }}
animate={{ opacity: showExplore ? 0 : 1, y: showExplore ? -20 : 0 }}
transition={{ duration: 0.25 }}
>
We <span className="text-secondary">Code</span>
</motion.div>

<motion.div
className="relative"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: showExplore ? 1 : 0, y: showExplore ? -20 : 0 }}
transition={{ duration: 0.25 }}
>
We <span className="text-secondary">Explore</span>
</motion.div>
</div>
</div>
</div>
);
};

Expand Down