Hooks provide additional flexibility in Framer Motion, enabling parallax effects, scroll-based animations, and dynamic transformations. These are crucial for smooth, modern web interactions.

6.1 Introduction to Framer Motion Hooks

Hooks allow developers to capture real-time motion values and dynamically adjust animations. Some essential Framer Motion hooks include:

• useScroll – Triggers animations based on scroll position.

• useSpring – Smoothens animations using spring physics.

• useTransform – Maps one value to another, enabling responsive animations.

• useVelocity – Adjusts animation speed dynamically.

6.2 Examples of Useful Hooks

6.2.1 useScroll for Parallax Effects

Parallax scrolling creates a depth effect, making backgrounds move slower than foreground elements:

const { scrollYProgress } = useScroll();

const yTransform = useTransform(scrollYProgress, [0, 1], [0, -200]);

return <motion.div style={{ y: yTransform }}>Parallax Content</motion.div>;

6.2.2 useSpring for Smooth Animations

Springs create natural motion curves without requiring manual timing adjustments.

const x = useMotionValue(0);

const springX = useSpring(x, { stiffness: 300, damping: 30 });

return <motion.div style={{ x: springX }} />;

6.2.3 useTransform for Responsive Animations

Transforms allow adaptive motion based on dynamic input values.

const scale = useTransform(scrollYProgress, [0, 1], [1, 1.5]);

return <motion.div style={{ scale }}>Scaling Effect</motion.div>;

6.2.4 useVelocity for Dynamic Speed Adjustments

By tracking scroll speed, useVelocity creates adaptive motion effects.

const scrollSpeed = useVelocity(scrollY);

const moveX = useTransform(scrollSpeed, [-1000, 1000], [-50, 50]);

return <motion.div style={{ x: moveX }}>Moving Element</motion.div>;