الواجهات والتصميم

GSAP ScrollTrigger Storytelling

بواسطة Julien Thibeaut (ui-skills.com) 3.7k نجوم GitHub

بناء سرد منتج سينمائي ثابت بالـ GSAP ScrollTrigger مع كشف تدريجي للـ UI وحركة متزامنة مع الـ scroll.

#scrolltrigger#storytelling#sticky#landing-page

Claude Code Codex

نظرة عامة

سكيل مركّز على أقسام السرد المدفوعة بالـ scroll: لوحات مثبّتة، وكشف تدريجي، وحركة متزامنة مع تقدّم الـ scroll، وانتقال سلس بين أقسام غامرة. مثالي للـ landing pages بتاعة المنتجات اللي بتحكي قصة وانت بتنزل.

بتنفع في إيه

عمل قصة منتج مثبّتة بتتقلّب مع الـ scroll
مزامنة الحركات مع تقدّم الـ scroll
بناء انتقالات أقسام غامرة
كشف تدريجي للـ UI مع الـ scroll

التثبيت

التثبيت في Claude Code

# ضيف الـ marketplace وبعدين ثبّت المهارة في Claude Code:
/plugin marketplace add ibelick/ui-skills
/plugin install gsap-scrolltrigger-storytelling

# أو ثبّتها يدويًا في ~/.claude/skills:
git clone https://github.com/ibelick/ui-skills.git
cp -r ui-skills/gsap-scrolltrigger-storytelling ~/.claude/skills/gsap-scrolltrigger-storytelling

التثبيت في Codex

# Codex بيقرأ مهارات SKILL.md من ~/.codex/skills (اكتشاف تلقائي):
git clone https://github.com/ibelick/ui-skills.git
cp -r ui-skills/gsap-scrolltrigger-storytelling ~/.codex/skills/gsap-scrolltrigger-storytelling

# وبعدين استخدم المهارة في Codex — بتتحمّل وقت الحاجة.

زيارة المصدر (GitHub)

استكشف أدوات AI

أدوات AI تكمل شغلك — للمصممين والمطورين

اقرأ مقالات عن AI

نصايح عملية في التصميم والذكاء الاصطناعي

أدوات مشابهة

الواجهات والتصميم

Frontend Design

عمل واجهات frontend مميزة بمستوى إنتاجي بعيداً عن جمالية الـ AI العامة — صفحات وكومبوننتس وartifacts وبوسترات.

Claude Code Codex

الواجهات والتصميم

Web Artifacts Builder

بناء artifacts HTML معقدة ومتعددة الكومبوننتس لـ Claude.ai باستخدام React وTailwind.

Claude Code Codex

الواجهات والتصميم

Animation Systems

حركة ويب بمستوى المنتجات زي Stripe وLinear وApple وVercel — إعدادات الـ easing والمدة والتناسق والأداء ووضع تقليل الحركة.

Claude Code Codex