As this sandbox demonstrates, when a page scroll is thrown into play, we don’t want to animate this vertical change. Whereas Framer Motion is attempting to do “layout” transitions. Matt Perry, the mastermind behind Framer Motion, graciously offered to expand a bit on how Framer Motion works in his Now in Motion newsletter:Ī straightforward FLIP implementation would be a “view” transition - the difference between how the viewport looks before and after a change. That's all for today thanks for reading! Addendum Once we figured out both of these problems, we ended up with a pretty solid implementation of automatic layout animation! We started off using CSS but then realized it fell short in a couple of ways:Ĭorrecting distortions in child elements caused by transforms in the parent element
FRAMER JS TEXT HOW TO
Ultimately, we wanted to figure out how to animate layout changes, that is, changes in an element that affect the position of itself and all surrounding elements. If you made it all the way here, thank you! Let's recap what we've learned.
If you're interested though, this part of the Framer Motion source code seems to be a good place to start - it looks like they maintain their own DOM-like tree of motion components using something called "projection nodes". I opted to not implement things this way because I didn't want to take away from the core scale correction concept. This API implies that the child component needs to be able to "hook in" to the parent's animation, which makes the implementation a tad more complex.
0 kommentar(er)
