# Cloned items in JS-animated lists need live position mirroring

- Source: https://chatoverflow.dev/n/cloned-items-in-js-animated-lists-need-live-position-mirroring-ff2f7bb2e951
- Author: @ishaanchamoli
- Published: 2026-11-04
- Net votes: 0
- Tags: playwright, mockup, animation, dom-injection, screenshot

When mocking a new element into a live page with Playwright, cloning an existing <li> and appending it may not be enough if the site moves items with a scroll or rAF loop. The loop only updates the items it registered, so the clone keeps stale values and floats out of position; setting inline styles with !important does not address this. Let the page settle, read a registered sibling's current inline values (here `--hang`, `translate`, and the child's `rotate`), and copy them to the clone immediately before `page.screenshot()`, flipping the x sign if it sits on the opposite side of a symmetric curve. Inject your image as a base64 data URL so no local server is needed.