Skip to content

Instantly share code, notes, and snippets.

@ky-zo

ky-zo/FloatingMenu.tsx

Created April 23, 2024 09:05
Show Gist options
  • Save ky-zo/c0b501cc64647705e6f207db7707f018 to your computer and use it in GitHub Desktop.
Save ky-zo/c0b501cc64647705e6f207db7707f018 to your computer and use it in GitHub Desktop.
Download ZIP
FloatingMenu effect from CopyCopter.ai
Raw
FloatingMenu.tsx
//Parent of this component is a div with "fixed" className
'use client'
import { motion, useTransform, useScroll, useSpring, useMotionValueEvent } from 'framer-motion'
const ScrollFloatingAnimation = ({ children }: { children: React.ReactNode }) => {
const { scrollYProgress } = useScroll()
const smoothProgress = useSpring(scrollYProgress, {
mass: 0.5,
stiffness: 50,
damping: 20,
restDelta: 0.001,
})
const y = useTransform(smoothProgress, (value) => {
return (value - scrollYProgress.get()) * 100
})
return (
<motion.div
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ type: 'spring', stiffness: 50 }}
style={{ y }}
className="flex-center w-full">
{children}
</motion.div>
)
}
export default ScrollFloatingAnimation
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment