framer / motion

Open source, production-ready animation and gesture library for React

Home Page:https://framer.com/motion

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[BUG] Certain animations don't work with Next.js experimental taint: true

martinwoo7 opened this issue · comments

Describe the bug

Certain framer motion animations do not work with Next.js when the experimental taint property in next.config.js is set to true.
This problem only seemingly occurs in development, and is not seen in production.
Removing the experimental taint property allows the animation to work correctly again.

IMPORTANT: Provide a CodeSandbox reproduction of the bug

The CodeSandbox minimal reproduction

Steps to reproduce

Steps to reproduce the behavior:

  1. Click the hamburger menu icon at the top right to see the menu animation
  2. In next.config.js, uncomment the experimental flag and the taint property
  3. After rebuilding and refreshing, clicking on the hamburger menu icon doesn't animate the menu as previously seen

Expected behavior

A menu animation sliding down should happen when clicking on the hamburger menu icon