עדכני לאפריל 2026 · Gold Standard v2.0

Motion, Animation & 3D — הכל זז

13 פרקים שמלמדים Vibe Coders את כל עולם האנימציה באינטרנט: CSS Animations, Easing, GSAP, ScrollTrigger, Framer Motion, Lenis, SVG, Lottie/Rive, Canvas, Three.js/Spline, Sound ו-Orchestration. מ"אתר סטטי" ל"אתר שחי".

13
פרקים מקיפים
3/13
זמינים עכשיו
3
שלבים
שלב 1 · Foundation

הבסיס — CSS Animations, Easing ותזמון

מפת האנימציות המלאה, 8 אנימציות CSS קלאסיות, והמדע של תנועה טבעית.

פרק 1

עולם האנימציה באינטרנט

6 שכבות האנימציה, 15 סוגי אנימציה, GPU acceleration, ו-5 פרומפטים AI.

7.5K מיליםFoundation
פרק 2

אנימציות CSS — בלי שום ספרייה

8 אנימציות קלאסיות, hover system, GPU performance, anti-patterns ו-reduced-motion.

7.5K מיליםFoundation
פרק 3

Easing ותזמון — תנועה טבעית

cubic-bezier, spring physics, stagger, duration, choreography ו-5 פרומפטים לתחושת תנועה.

7.5K מיליםFoundation
שלב 2 · Skill-Building

ספריות ושכבות מתקדמות

GSAP, ScrollTrigger, Motion, Lenis, SVG, Lottie/Rive, Canvas ו-3D.

פרק 4

GSAP — ספריית האנימציה של המקצוענים

Timelines, stagger, easing presets, ושליטה מלאה באנימציות מורכבות.

בקרובSkill-Building
פרק 5

ScrollTrigger — אנימציות בגלילה

Scroll-triggered, scroll-driven, pin, parallax ו-scrub.

בקרובSkill-Building
פרק 6

Motion (Framer) — Spring Physics ל-React

Spring animations, layout animations, AnimatePresence ו-drag.

בקרובSkill-Building
פרק 7

Lenis — Smooth Scrolling

Smooth scroll, inertia, ושילוב עם GSAP ו-ScrollTrigger.

בקרובSkill-Building
פרק 8

SVG Animation

Path drawing, morphing, filters, ו-animated icons.

בקרובSkill-Building
פרק 9

Lottie & Rive

After Effects → web, ו-Rive state machines.

בקרובSkill-Building
פרק 10

Canvas 2D

Particles, confetti, generative art ו-procedural backgrounds.

בקרובSkill-Building
פרק 11

3D — Three.js, Spline, React Three Fiber

תלת-מימד בדפדפן — מודלים, תאורה, אינטראקציה.

בקרובSkill-Building
שלב 3 · Integration

חיבור הכל

Sound, micro-interactions, ותזמור מערכת אנימציות שלמה.

פרק 12

Sound & Micro-interactions

Web Audio, click sounds, ו-micro-interactions שמשלימים אנימציה.

בקרובIntegration
פרק 13

Orchestration — חיבור הכל

תזמור מערכת אנימציות שלמה, ARES-X capstone, ו-motion design system.

בקרובCapstone