adobe / adobe/react-spectrum

[RAC/GridList] `framer-motion` `enter` animations not working

Open
#8,123 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the issue here

When using `` with a ``, the items do not animate in as expected.

### 🤔 Expected Behavior?

Animations should work the same as if using regular HTML elements

### 😯 Current Behavior

`enter` animations do not play, they're stuck in their starting state

https://github.com/user-attachments/assets/899885c9-8a7b-45cc-92e2-1b67f5448bcc

### 💁 Possible Solution

Not a solution, but it can be partially worked around by applying the animations to a child of the `GridListItem`, however, when doing so the `initial={false}` is not respected on `AnimatePresence`.

I suspect the reason, at least for the issue with the workaround where `initial={false}` isn't respected, is due to how collections work in React Aria; the items probably aren't rendered in the first render, and when they do render, it won't be the initial one.

### 🔦 Context

We're trying to animate list items.

### 🖥️ Steps to Reproduce

I've reproduced this with the latest versions of all packages here: https://codesandbox.io/p/sandbox/condescending-fog-3vkgjk

### Version

RAC 1.8.0

### What browsers are you seeing the problem on?

Chrome

### If other, please specify.

_No response_

### What operating system are you using?

macOS

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.