स्वाद का फ़्रेमवर्क
एनिमेशन मसाला है, खाना नहीं। हर साइट पर मैं तीन नियम मानता हूँ:
- सिर्फ़ transform और opacity.
top,left,width,heightकभी एनिमेट न करें — वे हर फ़्रेम पर लेआउट ट्रिगर करते हैं। - हर सेक्शन में एक एंट्रेंस पैटर्न.
stagger: 0.1के साथy: 20 → 0फ़ेड-अप क्राफ़्ट लगता है; पाँच अलग एंट्रेंस अराजकता लगती है। prefers-reduced-motionका सम्मान. अपरिहार्य।
React में स्कोप्ड, क्लीन-अप GSAP
useGSAP(() => {
gsap.fromTo(".card",
{ y: 20, opacity: 0 },
{
scrollTrigger: { trigger: containerRef.current, start: "top 85%" },
y: 0, opacity: 1, duration: 0.6, stagger: 0.1, ease: "back.out(1.5)",
}
);
}, { scope: containerRef });scope आपको सेलेक्टर स्कोपिंग और ऑटोमैटिक क्लीनअप देता है — रूट बदलने पर कोई लीक हुए ScrollTrigger नहीं।
इंसानी लगने वाले ईज़
| ईज़ | महसूस होता है |
|---|---|
power3.out |
आत्मविश्वास से भरा आगमन |
back.out(1.5) |
चंचल पॉप |
elastic.out(1, 0.5) |
साइट पर अधिकतम एक बार |
इलास्टिक बाउंस मसाले की दानी है, सॉस की बोतल नहीं।