Search code examples
javascriptreactjsframer-motion

How to resolve fixed position elements jumps when scrolling | React JS, framer-motion


I have a scenario where the container changes its position from fixed to relative, during scrolling. I have used framer-motion to give a smooth effect during position transitioning. framer-motion is a great library to handle these scenarios, however my code is not working as expected in all browsers. When I scroll to the offset where the position changes from fixed to relative, it jumps and sits in the place, where as am expecting it should be smooth.


Solution

  • You should add "layout" prop to the component you are animating. You can read more about it in the docs