Interaction built using shared layout animations from Motion.
Doodles
9998 items
Preface
Prior to figuring out how shared layout animations work, I thought they were very complicated and involved a lot of complex calculations.
While that is true, Motion makes it very easy and abstracts all of the complex calculations away. I recommend reading Inside Framer's Magic Motion by Nanda if you're interested in seeing how all the calculations are done under the hood.
Structure
The way I structured this component is pretty simple. I created an expanded and collapsed state components and a collection image component.
Collection Image
This component is shared between both states, so there is some state-specific functionality that will get covered later. Otherwise, it's a very simple component.
The collapsed state contains invididual images that are absolutely positioned and stacked on top of one another. Hovering the item sets isHovered to true which in turn animates each image individually.
Each item has custom rotate, x and y values that are animated on hover.
I mapped over the images with the exception of the collection avatar, because it behaves differently in the expanded state. Each item also has a unique layoutId for the cross-state animation.
Everything is wrapped in a div that triggers the animations on hover and an onClick that changes the state.
The hover effect in the expanded state is the most complex part of this interaction.
I started off by tracking the mouse/touch position in the expanded state relative to its container. This value is then stored in a mouseLeft motion value.
The position is updated on both mouse movement and touch events.
Then in the Collection Image component, I use useTransform which is a Motion hook that creates a derived motion value that updates whenever its dependencies change.
For each image, we get its position offsetLeft and width offsetWidth from the DOM.
The distance is then calculated by taking the mouse position mouseLeft.get(), subtracting the image's left edge position bounds.x and subtracting half the image's width bounds.width / 2 to get the distance from the center.
We then need to handle scale transformation and offset animation. What this basically does is that if the cursor is far away from the image the scale stays at 1.
When the cursor is directly on top of the image, i.e. distance=0, the image scales up to it's max scale. The scale interpolates between these values as the mouse moves.
Then, the calculateOffset function creates the "push away" effect. This function returns 0 when there's no mouse interaction, pushes images away from the mouse when they're far away and transitions between these states based on both the distance and the current scale.
The NUDGE constant determines how far the images are pushed away, and the Math.sign(currentDistance) ensures images are pushed in the correct direction (away from the mouse).
// Scale up image when mouse is close (distance 0), normal size when far awayconst scale = useTransform(distance, [-DISTANCE, 0, DISTANCE], [1, SCALE, 1]);const calculateOffset = (currentDistance: number, currentScale: number) => { if (currentDistance === -Infinity) { return 0; } // Push away items that are far from the mouse if (currentDistance < -DISTANCE || currentDistance > DISTANCE) { return Math.sign(currentDistance) * -1 * NUDGE; } // Smoothly offset items based on distance and scale return (-currentDistance / DISTANCE) * NUDGE * currentScale;};
Then, the useSpring hook from Motion takes the raw scale and position values and applies springs to them.
These constants are the "magic numbers" that control how the animation feels. They determine how much the image scales up, how far the mouse needs to be to affect the images and how far the images are pushed away from the mouse.
Finally, I wrapped everything in another MotionConfig as well as AnimatePresence with the popLayout mode, added keys and render the correct content based on the state.
