v.korobtsev/next-enterprise
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Scroll Animations

Browse source
This commit is contained in:
Dex404 2024-04-18 08:53:36 +00:00
parent 84c14cec5a
commit ff7bbd72a4
16 changed files with 769 additions and 319 deletions
Download patch file Download diff file Expand all files Collapse all files

52
app/page.tsx
View file

@ -1,66 +1,36 @@
"use client"
import { useRef, useState } from "react"
import "../styles/custom.css"
import AboutUs from "components/aboutUs/AboutUs"
import Hero01 from "components/Hero01/Hero01"
import OurServices from "components/OurServices/OurServices"
import Portfolio from "components/Portfolio/Portfolio"
import ContactUs from "components/ContactUs/ContactUs"
import { motion, useScroll } from "framer-motion"
export default function Web() {
const [init, setInit] = useState(false)
const [hovered, setHovered] = useState(false)
const imgStyle = {
transform: hovered ? "translateX(3px)" : "none",
transition: "transform .2s", // Optional: Smooth transition
}
const wordVariants = {
hidden: { opacity: 0, y: 20 },
visible: { opacity: 1, y: 0, transition: { duration: 0.9, staggerChildren: 0.1 } },
}
const ref = useRef<HTMLDivElement>(null)
const { scrollYProgress } = useScroll({
target: ref,
offset: ["0 1", "0.9 1.9"],
})
return (
<div>
<section className="bg-[#0f172a] md:pl-0 md:pr-0 lg:pl-[15%] lg:pr-[15%]">
<section id="Home" className="bg-[#0f172a] md:pl-0 md:pr-0 lg:pl-[2%] lg:pr-[2%]">
<Hero01 />
</section>
<section className="bg-[#0f172a] md:pl-0 md:pr-0 lg:pl-[15%] lg:pr-[15%]">
<section id="aboutUs" className="bg-[#0f172a] md:pl-0 md:pr-0 ">
<AboutUs />
</section>
<motion.div
initial={{ opacity: 0.5, scale: 0.8 }}
whileInView={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.7 }}
>
<section className="mt-[3%] bg-[#0f172a] max-md:p-4 md:pl-0 md:pr-0 lg:pl-[10%] lg:pr-[10%]">
<div>
<section id="services" className="mt-[3%] bg-[#0f172a] max-md:p-4 md:pl-0 md:pr-0 lg:pl-[10%] lg:pr-[10%]">
<OurServices />
</section>
</motion.div>
<motion.div
initial={{ opacity: 0.5, scale: 0.8 }}
whileInView={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.7 }}
>
<section className="mb-10 h-[20%] bg-[#0f172a] pl-[10%] pr-[10%] pt-40">
</div>
<div>
<section id="portfolio" className="mb-10 h-[20%] bg-[#0f172a] pl-[10%] pr-[10%] pt-40">
<Portfolio />
</section>
</motion.div>
<motion.div
initial={{ opacity: 0.5, scale: 0.8 }}
whileInView={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.7 }}
>
<section className="bg-[#0f172a] max-md:p-4 md:pl-0 md:pr-0 lg:pl-[10%] lg:pr-[10%]">
</div>
<div>
<section id="contactUs" className="bg-[#0f172a] max-md:p-4 md:pl-0 md:pr-0 lg:pl-[10%] lg:pr-[10%]">
<ContactUs />
</section>
</motion.div>
</div>
</div>
)
}