# Fix animations in a website rebuild

> Troubleshoot missing scroll effects, GSAP timelines and animated content after a website export. Rebuild one effect at a time with a reliable static fallback.

Canonical page: https://sitepeel.dev/guides/fix-cloned-website-animations/

An exported layout may preserve an animation’s current appearance without the runtime, state and layout measurements that drive it. Rebuild the behavior from a clear motion reference.

## Identify what drives the effect

Start by describing what the animation does and when it starts. A hover transition, a CSS keyframe sequence, a scroll-linked timeline and a WebGL scene have different dependencies. Treating them all as a style attached to an element makes it difficult to understand what the export is missing.

Capture a short reference showing the beginning, middle and end of the effect. Note the viewport size and whether movement follows scrolling or elapsed time. For a site you own, inspect the original implementation if it is available. A browser recording describes the experience, while source code can explain its state and initialization.

## Make the unanimated layout work first

Check whether text and images are present but hidden behind an initial opacity, transform or clipping state. Some designs rely on JavaScript to reveal content after loading. If that initialization is absent, the copied page may appear empty even though the relevant elements are in the document.

Build a readable static version before restoring motion. Preserve the content order, dimensions and image proportions. Avoid compensating for a missing animation with arbitrary offsets: those offsets can conceal a broken layout at one width and create a larger problem elsewhere. Sitepeel can provide a layout reference, but the rebuilt effect still needs its own implementation.

## Check initialization and layout dependencies

For a GSAP-based rebuild, verify that the library and required plugin are available, the plugin is registered and the target elements exist when the animation is created. Check the console for the first error rather than debugging every downstream symptom. In a component framework, make sure initialization and cleanup follow that framework’s lifecycle.

Scroll-linked effects also depend on element positions and the correct scrolling container. Fonts or images that change the layout after setup can shift trigger positions. GSAP documents ScrollTrigger.refresh() for recalculating start and end positions. Use it when the relevant layout has settled; repeatedly calling it cannot repair missing elements or an incorrect scroller.

- Confirm the static target is visible and correctly positioned.
- Check loaded scripts, imports and the first runtime error.
- Confirm the target selector and scrolling container.
- Recalculate measurements after relevant layout changes.
- Remove old listeners and animation instances when rebuilding a component.

## Rebuild one effect with explicit states

A small motion specification is often more useful than asking an agent to recreate an entire animated website. Describe the trigger, affected elements, duration or scroll range, and the final state. Include what happens if someone scrolls backward or navigates away and returns.

Use the example below as a brief, not as a claim about the source site. The fallback matters: motion should enhance a readable page rather than be the only way to reveal essential content. Test the final behavior with the actual text and media you plan to ship.

Example: motion-reference.md

```
# Section motion reference

Static layout: heading, explanation, then product image.
Trigger: the section enters the viewport.
Effect: a short upward reveal of the image.
End state: the image is fully visible in its normal position.
Repeat: once per page visit.

With reduced motion: show the final state immediately.
Without animation initialization: content stays readable.
On resize: preserve the layout and avoid duplicate listeners.

Implement and review this effect before adding another.
```

## Test the conditions that change the result

Reload partway down the page, resize the browser and try a narrow viewport. Check a slow media load and the reduced-motion setting. Revisit the page through the application’s navigation to catch duplicate initialization that a single hard refresh might hide.

Canvas and WebGL experiences can require substantial rendering code and assets. A screenshot of that output does not reconstruct its scene. If the original implementation is unavailable, decide whether a simpler effect communicates the same idea. Rebuilding a deliberate interaction is usually easier to maintain than depending on an unexplained collection of copied scripts.

## Further reading

- [Reddit: broken GSAP, scroll and WebGL effects after saving a site](https://www.reddit.com/r/vibecoding/comments/1t8djye/cloning_awwwards_websites_with_codex/)
- [GSAP: ScrollTrigger setup and refresh behavior](https://gsap.com/docs/v3/Plugins/ScrollTrigger/)

## Related pages

- [Website cloner](https://sitepeel.dev/website-cloner/index.md): Clone a website page from your browser. Preview and export rendered HTML, styles and available assets with Sitepeel. Try the website cloner here.
- [Understand what a website clone includes](https://sitepeel.dev/guides/can-you-clone-website-backend/index.md): Understand the difference between a rendered website export and a working application, including JavaScript, forms, login, databases and backend code.
- [Choose the right AI design reference](https://sitepeel.dev/guides/screenshot-html-design-md-for-ai/index.md): Choose between screenshots, HTML and DESIGN.md when rebuilding a website with AI. Learn what each reference reveals and how to combine them.