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>
)
}

10
components/aboutUs/AboutUs.tsx
View file

@ -4,8 +4,10 @@ import { BsPlayCircle } from "react-icons/bs"
import { Modal } from "components/Modal/Modal"
import { useState } from "react"
import { motion } from "framer-motion"
export default function AboutUs() {
const [isModalOpen, setIsModalOpen] = useState(false)
return (
<div
className=" h-[60%] rounded-[3rem] max-md:rounded-none"
@ -16,11 +18,7 @@ export default function AboutUs() {
backgroundRepeat: "no-repeat",
}}
>
<motion.div
animate={{ y: -50 }}
transition={{ delay: 1 }}
className="flex w-[100%] justify-around pb-[10vh] pt-[5vh] max-md:flex-wrap"
>
<div className="flex w-[100%] justify-around pb-[10vh] pt-[5vh] max-md:flex-wrap">
<div className="mx-auto max-w-screen-xl px-4 py-8 lg:py-16">
<div className="mx-auto text-left text-white">
<h4 className="bg-gradient-to-r from-vizoleG1 via-vizoleG2 to-vizoleG3 bg-clip-text pt-20 font-bold text-transparent ">
@ -81,7 +79,7 @@ export default function AboutUs() {
</div>
</div>
</div>
</motion.div>
</div>
</div>
)
}

4
package.json
View file

@ -55,6 +55,7 @@
"@tsparticles/engine": "^3.3.0",
"@tsparticles/react": "^3.0.0",
"@vercel/otel": "^0.3.0",
"aos": "^2.3.4",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.0",
"flowbite-react": "^0.9.0",
@ -65,6 +66,9 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^5.0.1",
"react-intersection-observer": "^9.8.2",
"react-reveal": "^1.2.2",
"react-scroll-motion": "^0.3.3",
"react-tsparticles": "^2.12.2",
"tailwind-merge": "^2.2.2",
"tailwind-variants": "^0.2.1",

33
utils/Animation.tsx Normal file
View file

@ -0,0 +1,33 @@
import React from "react"
import { motion, useAnimation } from "framer-motion"
import { useInView } from "react-intersection-observer"
const AnimatedDiv = () => {
const controls = useAnimation()
const { ref, inView } = useInView()
React.useEffect(() => {
if (inView) {
controls.start("visible")
} else {
controls.start("hidden")
}
}, [controls, inView])
return (
<div className="flex h-screen items-center justify-center">
<motion.div
ref={ref}
initial="hidden"
animate={controls}
variants={{
visible: { scale: 1, opacity: 1 },
hidden: { scale: 0, opacity: 0 },
}}
transition={{ duration: 0.5 }}
/>
</div>
)
}
export default AnimatedDiv

40
yarn.lock
View file

@ -8341,6 +8341,15 @@ anymatch@^3.0.3, anymatch@~3.1.2:
normalize-path "^3.0.0"
picomatch "^2.0.4"
aos@^2.3.4:
version "2.3.4"
resolved "https://registry.yarnpkg.com/aos/-/aos-2.3.4.tgz#eb1c29f5c1806a197cf6323080747547edd3db8e"
integrity sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==
dependencies:
classlist-polyfill "^1.0.3"
lodash.debounce "^4.0.6"
lodash.throttle "^4.0.1"
app-root-dir@^1.0.2:
version "1.0.2"
resolved "https://registry.npmjs.org/app-root-dir/-/app-root-dir-1.0.2.tgz"
@ -9326,6 +9335,11 @@ class-variance-authority@^0.7.0:
dependencies:
clsx "2.0.0"
classlist-polyfill@^1.0.3:
version "1.2.0"
resolved "https://registry.yarnpkg.com/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz#935bc2dfd9458a876b279617514638bcaa964a2e"
integrity sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ==
classnames@2.3.2:
version "2.3.2"
resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz"
@ -14025,7 +14039,7 @@ lodash.castarray@^4.4.0:
resolved "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz"
integrity sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==
lodash.debounce@^4.0.8:
lodash.debounce@^4.0.6, lodash.debounce@^4.0.8:
version "4.0.8"
resolved "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz"
integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
@ -14095,6 +14109,11 @@ lodash.sortby@^4.7.0:
resolved "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz"
integrity sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==
lodash.throttle@^4.0.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==
lodash.uniqby@^4.7.0:
version "4.7.0"
resolved "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz"
@ -15947,7 +15966,7 @@ promzard@^1.0.0:
dependencies:
read "^2.0.0"
prop-types@15.8.1, prop-types@^15.7.2, prop-types@^15.8.1:
prop-types@15.8.1, prop-types@^15.5.10, prop-types@^15.7.2, prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@ -16209,6 +16228,11 @@ react-inspector@^6.0.0:
resolved "https://registry.npmjs.org/react-inspector/-/react-inspector-6.0.2.tgz"
integrity sha512-x+b7LxhmHXjHoU/VrFAzw5iutsILRoYyDq97EDYdFpPLcvqtEzk4ZSZSQjnFPbr5T57tLXnHcqFYoN1pI6u8uQ==
react-intersection-observer@^9.8.2:
version "9.8.2"
resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-9.8.2.tgz#a45db2441909a4d2f310de381686e151f016691d"
integrity sha512-901naEiiZmse3p+AmtbQ3NL9xx+gQ8TXLiGDc+8GiE3JKJkNV3vP737aGuWTAXBA+1QqxPrDDE+fIEgYpGDlrQ==
react-is@18.1.0:
version "18.1.0"
resolved "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz"
@ -16272,6 +16296,18 @@ react-remove-scroll@^2.5.6:
use-callback-ref "^1.3.0"
use-sidecar "^1.1.2"
react-reveal@^1.2.2:
version "1.2.2"
resolved "https://registry.yarnpkg.com/react-reveal/-/react-reveal-1.2.2.tgz#f47fbc44debc4c185ae2163a215a9e822c7adfef"
integrity sha512-JCv3fAoU6Z+Lcd8U48bwzm4pMZ79qsedSXYwpwt6lJNtj/v5nKJYZZbw3yhaQPPgYePo3Y0NOCoYOq/jcsisuw==
dependencies:
prop-types "^15.5.10"
react-scroll-motion@^0.3.3:
version "0.3.3"
resolved "https://registry.yarnpkg.com/react-scroll-motion/-/react-scroll-motion-0.3.3.tgz#8d9a562f98b7b59f05079ac95510f141fa6718f8"
integrity sha512-Q33prpcdWDfQaHVmED7bo/EReUEBHfL6mOfvMGFP3FhDxTKddIoocMcd3bT9qw2KQ/fqNdJNADf7aiHWSLkXuQ==
react-style-singleton@^2.2.1:
version "2.2.1"
resolved "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz"