I saw this fancy scrolling effect on this website and it just blew my mind. I thought of recreating it and got somewhat successful :)
Run the following commands to have an initial setup to work on.
Final File Structure
Let's start with the hero section. We'll be using
framer-motion to animate the image on scroll.
Copy paste this code in
Let's break it down:
- Here we import all the sass we need from framer motion
- motion: Grants a normal JSX element super powers (extra props to work with framer motion API)
- useViewportScroll: Can be used to track the position of the scroll.
- useTransform: Can be used to change the value of a variable based on a changing value of another variable. (by default: the change is linear)
- We are using the
useViewportScrollhook to get the vertical scroll distance in pixels
- Using the
useTransformhook to change the value of 3 variables,
moveDownbased on the
- Here we pass the dynamic values to the
stylesprop of the motion component.
- Lastly, we are adding this empty div of height equal to the total scrolling area we set. This allows us to scroll as the above
imageContaineris set to