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-17 10:34:04 +00:00
parent 69a99c0013
commit d9eb1bb3a4
5 changed files with 113 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

49
app/page.tsx
View file

@ -1,8 +1,6 @@
"use client"
import { Button } from "components/Button/Button"
import { useState } from "react"
import { useRef, useState } from "react"
import "../styles/custom.css"
import AboutUs from "components/aboutUs/AboutUs"
@ -10,6 +8,7 @@ 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)
@ -22,6 +21,11 @@ export default function Web() {
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%]">
@ -30,18 +34,33 @@ export default function Web() {
<section className="bg-[#0f172a] md:pl-0 md:pr-0 lg:pl-[15%] lg:pr-[15%]">
<AboutUs />
</section>
<section className="mt-[3%] bg-[#0f172a] max-md:p-4 md:pl-0 md:pr-0 lg:pl-[10%] lg:pr-[10%]">
<OurServices />
</section>
<section className="mb-10 h-[20%] bg-[#0f172a] pl-[10%] pr-[10%] pt-40">
<Portfolio />
</section>
<section className="bg-[#0f172a] max-md:p-4 md:pl-0 md:pr-0 lg:pl-[10%] lg:pr-[10%]">
<ContactUs />
</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%]">
<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">
<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%]">
<ContactUs />
</section>
</motion.div>
</div>
)
}