animation-scroll-effects
Skill2 starsChanged 3 months agoMITView on GitHub
Animation and scroll effects skill using GSAP, Lenis, and Framer Motion.
In this repository93 other files it gives its agents.
- AGENTS.mdAGENTS.md
- npm/AGENTS.mdAGENTS.md
- advanced-image-slicing-skillSkill
- agents-sdkSkill
- agent-weaver-builderSkill
- alphafold-database-fetch-and-analyzeSkill
- alphagenome-single-variant-analysisSkill
- backend-api-shield-servicesSkill
- chembl-databaseSkill
- chronicle-logger-timestampSkill
- cicd-automation-deploySkill
- cinematic-animator-gsapSkill
- clinical-trials-databaseSkill
- clinvar-databaseSkill
- cloudflare-ai-resourcesSkill
- cloudflare-email-serviceSkill
- cloudflare-one-migrationsSkill
- cloudflare-oneSkill
- cloudflareSkill
- data-modeler-schemaSkill
- dbsnp-databaseSkill
- design-system-master-hslSkill
- durable-objectsSkill
- embl-ebi-olsSkill
- encode-ccres-databaseSkill
- ensembl-databaseSkill
- explode-animation-skillSkill
- find-skillsSkill
- foldseek-structural-searchSkill
- frontend-clean-coder-jsSkill
- gnomad-databaseSkill
- google-antigravity-sdkSkill
- gtex-databaseSkill
- human-protein-atlas-databaseSkill
- inner-learner-feedbackSkill
- integrative-architect-docsSkill
- intent-observer-audit360Skill
- interpro-databaseSkill
- isolated-sandbox-environmentSkill
- jaspar-databaseSkill
- k6-load-testingSkill
- lightweight-dep-managerSkill
- literature-search-arxivSkill
- literature-search-biorxivSkill
- literature-search-europepmcSkill
- literature-search-openalexSkill
- maestro-hadi-orchestrationSkill
- majlis-rulesSkill
- marketing-funnel-skillSkill
- ncbi-sequence-fetchSkill
- neuro-marketing-copywriterSkill
- nuclei-security-auditorSkill
- openfda-databaseSkill
- opentargets-databaseSkill
- owasp-zap-api-shieldSkill
- pdb-databaseSkill
- pdf-scan-layer-cleanerSkill
- premium-visual-polish-skillSkill
- protein-sequence-msaSkill
- protein-sequence-similarity-searchSkill
- The first 60 shown.
The file
Files
دليل موارد وأدوات الأنيميشن وتأثيرات التمرير (Animation & Scroll Effects)
هذا المجلد يحتوي على تجميعة لأفضل المكتبات والموارد المجانية لعمل مواقع تفاعلية واحترافية تعتمد على الحركة وتأثيرات التمرير.
📂 الفهرس
- المكتبات الأساسية (Framework-Agnostic)
- مكتبات React & Next.js
- أدوات التمرير الناعم (Smooth Scroll)
- تأثيرات البارالاكس (Parallax)
- قوالب ومكونات التصميم المتجاوب (Responsive Design)
1. المكتبات الأساسية
تستخدم مع أي مشروع (HTML/JS/Vue/React).
| المكتبة | الوصف | الرابط |
| GSAP | الأقوى عالمياً للحركات المعقدة وربط الحركة بالتمرير. | GitHub |
| Anime.js | محرك حركي خفيف ومرن جداً للـ CSS و SVG. | GitHub |
| Sal.js | مكتبة فائقة الأداء تعتمد على Intersection Observer. | GitHub |
| ScrollReveal | الأبسط لعمل تأثيرات ظهور العناصر عند التمرير. | GitHub |
2. مكتبات React & Next.js
مكونات جاهزة وتكامل عميق مع React.
| المكتبة | الوصف | الرابط |
| Framer Motion | المعيار الأساسي للأنيميشن في React. | GitHub |
| Aceternity UI | مكونات "بريميوم" جاهزة (انسخ والصق). | Website |
| Magic UI | مكونات بصرية مذهلة وحركات حديثة. | Website |
3. أدوات التمرير الناعم (Smooth Scroll)
لإعطاء الموقع إحساس الفخامة (Premium Feel).
- Lenis Scroll: المكتبة المفضلة حالياً للمحترفين، تضمن تمرير سلس جداً دون التأثير على أداء المتصفح.
4. تأثيرات البارالاكس (Parallax)
- Rellax: لعمل طبقات تتحرك بسرعات مختلفة عند التمرير.
5. قوالب ومكونات التصميم المتجاوب (Responsive Design)
أفضل الموارد لضمان توافق الموقع مع جميع الأجهزة.
| المورد | الوصف | الرابط |
| Cruip Open Templates | قوالب هبوط احترافية جداً لـ React و Tailwind. | GitHub |
| AstroWind | قالب فائق السرعة والأداء مبني بـ Astro. | GitHub |
| HyperUI | مجموعة مكونات Tailwind جاهزة للنسخ. | GitHub |
| Flowbite | مكتبة مكونات UI شاملة ومتوافقة. | GitHub |
| Shadcn/ui | نظام تصميم حديث يمنحك تحكماً كاملاً. | GitHub |
🛠️ كيف تبدأ؟
للحصول على أفضل النتائج، ننصح بالدمج بين:
- Lenis للتمرير الناعم.
- GSAP (ScrollTrigger) للحركات المخصصة.
- Framer Motion إذا كنت تستخدم React.
تم إعداد هذا الملف بواسطة المجلس (Majlis).
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.