42 lines
1.2 KiB
Markdown
42 lines
1.2 KiB
Markdown
---
|
|
name: add-animation
|
|
description: Add animation to a component with proper setup and cleanup
|
|
disable-model-invocation: true
|
|
---
|
|
|
|
# Add Animation
|
|
|
|
Add animation to: $ARGUMENTS
|
|
|
|
## Process
|
|
|
|
1. **Choose animation library**
|
|
- GSAP: Complex timelines, ScrollTrigger, text splitting
|
|
- Framer Motion: Simple component animations, gestures, layout
|
|
- CSS: Basic transitions, hover states
|
|
|
|
2. **For GSAP animations**
|
|
- Register plugins at file level
|
|
- Use `gsap.context()` for cleanup
|
|
- Return `() => ctx.revert()` from useEffect
|
|
- Use refs for target elements
|
|
|
|
3. **For Framer Motion**
|
|
- Wrap conditionally rendered elements in `AnimatePresence`
|
|
- Add `key` prop for AnimatePresence children
|
|
- Use `initial`, `animate`, `exit` props
|
|
|
|
4. **For scroll-triggered animations**
|
|
- Set appropriate `start` and `end` points
|
|
- Use `toggleActions` for replay behavior
|
|
- Consider mobile: disable or simplify
|
|
|
|
5. **Performance considerations**
|
|
- Use transform properties (x, y, scale, rotation)
|
|
- Add `force3D: true` for GPU acceleration
|
|
- Check if animation should be disabled on mobile
|
|
|
|
## Output
|
|
|
|
Show the implemented animation code with proper cleanup.
|