Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

[BUG] animate change made while inside a hidden <Activity> is ignored on reveal

Chiusa
  • Qualcosa non va?
#3,942 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Una pull request collegata è già stata integrata.

  • #3950 di @mattgperry — integrata

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
45/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Start in useVisualElement, where the insertion effect calls visualElement.update only after isMounted.current is set in a layout effect; a hidden <Activity> never runs layout effects, so updates are skipped. The repro test in the linked repository (the first test, which fails, with the second as a control) is the check for the fix. Done means the test passes and the existing suite still passes, with the animation reaching the latest animate value on reveal.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

1. Read the FAQs

Done.

2. Describe the bug

A motion.div that first mounts inside <Activity mode="hidden"> ignores any animate change made before the Activity is shown. On reveal it animates to the animate value from its first render.

In useVisualElement, the insertion effect only calls visualElement.update(props, presenceContext) once isMounted.current is true, and isMounted is set in a layout effect. A hidden Activity runs no layout effects, so every re-render before the reveal skips update. When the Activity is shown, animateChanges() runs against the props from the first render.

This is close to #3832 but a different case: there the element had mounted visibly before being hidden. Here it has never been visible.

3. Reproduction

https://stackblitz.com/github/mdluo/motion-activity-repro (run npm install && npm test; source: https://github.com/mdluo/motion-activity-repro). The first test fails, the second is a control that passes.

import { render, waitFor } from "@testing-library/react"
import { motion } from "framer-motion"
import { Activity } from "react"

function Panel({ shown, active }: { shown: boolean; active: boolean }) {
    return (
        <Activity mode={shown ? "visible" : "hidden"}>
            <motion.div
                data-testid="box"
                initial={{ opacity: 0 }}
                animate={{ opacity: active ? 1 : 0 }}
            />
        </Activity>
    )
}

test("animate prop changed while hidden is used on reveal", async () => {
    const { rerender, getByTestId } = render(<Panel shown={false} active={false} />)
    rerender(<Panel shown={false} active />)
    rerender(<Panel shown active />)
    await waitFor(() => expect(getByTestId("box").style.opacity).toBe("1"))
})

4. Steps to reproduce

  1. Mount the element inside a hidden <Activity> with animate={{ opacity: 0 }}.
  2. While still hidden, re-render with animate={{ opacity: 1 }}.
  3. Show the Activity.
  4. Opacity stays at 0.

5. Expected behavior

On reveal the element animates to opacity: 1, the animate value of the latest render.

6. Environment details

framer-motion 13.4.4 and 14.3.0, React 19.2.0 and 19.3.0. Seen in Chrome; the test fails in jsdom and happy-dom.

Possible fix

This passes the test above and our app's suites. We are running it as a local patch:

// useVisualElement, in the layout effect that sets isMounted
if (!isMounted.current) visualElement.update(props, presenceContext)
isMounted.current = true

The repro and the patch were written with an AI assistant; we ran the test against both the stock and the patched package.

Lingua principale
TypeScript
Stelle
34.4k
Fork
1.4k
Merge medio
23h 3m
PR unite (30g)
108

Preparare l'ambiente

Apri in Codespaces

Avvia il container di sviluppo del progetto nel browser, con il tuo account GitHub.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di motiondivision/motion

Tutte le issue di motiondivision/motion

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.