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

20
utils/ScrollAnimations/MoveDownOnScroll.tsx Normal file
View file

@ -0,0 +1,20 @@
import React from "react"
import { motion } from "framer-motion"
function MoveDownWhenVisible({ children }: { children: React.ReactNode }) {
return (
<motion.div
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
transition={{ duration: 0.7 }}
variants={{
visible: { opacity: 1, translateY: 0 },
hidden: { translateY: -100, opacity: 0 },
}}
>
{children}
</motion.div>
)
}
export default MoveDownWhenVisible

20
utils/ScrollAnimations/MoveLeftOnScroll.tsx Normal file
View file

@ -0,0 +1,20 @@
import React from "react"
import { motion } from "framer-motion"
function MoveLeftWhenVisible({ children }: { children: React.ReactNode }) {
return (
<motion.div
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
transition={{ duration: 0.7 }}
variants={{
visible: { opacity: 1, translateX: 0 },
hidden: { translateX: 100, opacity: 0 },
}}
>
{children}
</motion.div>
)
}
export default MoveLeftWhenVisible

20
utils/ScrollAnimations/MoveRightOnScroll.tsx Normal file
View file

@ -0,0 +1,20 @@
import React from "react"
import { motion } from "framer-motion"
function MoveRightWhenVisible({ children }: { children: React.ReactNode }) {
return (
<motion.div
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
transition={{ duration: 0.7 }}
variants={{
visible: { opacity: 1, translateX: 0 },
hidden: { translateX: -100, opacity: 0 },
}}
>
{children}
</motion.div>
)
}
export default MoveRightWhenVisible

20
utils/ScrollAnimations/MoveTopLeftOnScroll.tsx Normal file
View file

@ -0,0 +1,20 @@
import React from "react"
import { motion } from "framer-motion"
function MoveTopLeftWhenVisible({ children }: { children: React.ReactNode }) {
return (
<motion.div
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
transition={{ duration: 0.7 }}
variants={{
visible: { opacity: 1, translateX: 0, translateY: 0 },
hidden: { translateX: 20, translateY: 5, opacity: 0 },
}}
>
{children}
</motion.div>
)
}
export default MoveTopLeftWhenVisible

20
utils/ScrollAnimations/MoveUpOnScroll.tsx Normal file
View file

@ -0,0 +1,20 @@
import React from "react"
import { motion } from "framer-motion"
function MoveUpWhenVisible({ children }: { children: React.ReactNode }) {
return (
<motion.div
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
transition={{ duration: 0.7 }}
variants={{
visible: { opacity: 1, translateY: 0 },
hidden: { translateY: 100, opacity: 0 },
}}
>
{children}
</motion.div>
)
}
export default MoveUpWhenVisible