آموزش انیمیشن وب خلاقانه با GSAP 3 [JavaScript SVG CSS] - آخرین آپدیت

سرفصل ها و درس ها

مقدمه Introduction

• آشنایی با GSAP Introduction to GSAP

• مقدمه ساختار دوره و نمای کلی موضوعات Introduction to course structure and topical overview

• نصب کتابخانه GSAP installing the GSAP library

مفاهیم پایه GSAP Basic GSAP concepts

• شیء جاوا اسکریپت و شیء gsap JavaScript object & gsap object

• تروین (Tween) Tween

• متدهای رایج برای ایجاد تروین Common methods for creating a Tween

• ابزار خط زمان (Timeline) Timeline tool

• موقعیت‌دهی انیمیشن‌ها در خط زمان Positioning of animations on the timeline

• متدهای کنترل انیمیشن پایه Basic animation control methods

قابلیت‌های عمیق GSAP GSAP capabilities in depth

• متد set() set() method

• انیمیشن‌های جدا شده (Staggered Animations) [قسمت مقادیر عددی ۱: درس ۲ الف] Staggered animations [numerical values part1: lesson2a]

• انیمیشن‌های جدا شده [قسمت مقادیر عددی ۱: درس ۲ ب] Staggered animations [numerical values part1: lesson2b]

• انیمیشن‌های جدا شده [قسمت مقادیر عددی ۱: درس ۲ ج] Staggered animations [numerical values part1: lesson2c]

• انیمیشن‌های جدا شده [قسمت مقادیر عددی ۲] Staggered animations [numerical values part2]

• نیاز به کمک شما اینجا! Your help is needed here!

• انیمیشن‌های جدا شده [اشیاء پیکربندی] Staggered animations [configuration objects]

• انیمیشن‌های جدا شده [توابع به عنوان مقادیر] Staggered animations [functions as values]

• منطق ساخت انیمیشن [تعامل‌پذیری] Animation construction logic [Interactivity]

• منطق ساخت انیمیشن [بازگشتی] Animation construction logic [Recursion]

پلاگین‌های هسته GSAP GSAP core Plugins

• AttrPlugin [انیمیشن فیلترهای SVG] AttrPlugin [Animation of SVG filters]

• CSSPlugin [قسمت ۱: اطلاعات عمومی] CSSPlugin [Part 1: general information]

• CSSPlugin [قسمت ۲: انیمیشن مقادیر پیچیده] CSSPlugin [Part 2: Animation of complex values]

• CSSPlugin [قسمت ۳: انیمیشن همزمان خصوصیات ۲ بعدی و ۳ بعدی] CSSPlugin [Part3: Simultaneous animation of 2d and 3d properties]

• CSSPlugin [قسمت ۴: xPercent, yPercent] CSSPlugin [Part4: xPercent, yPercent]

• CSSPlugin [قسمت ۵: چرخش جهت‌دار] CSSPlugin [Part5: Directional rotation]

• CSSPlugin [قسمت ۶: انیمیشن فیلترهای CSS] CSSPlugin [Part6: Animation of CSS filters]

• ModifiersPlugin ModifiersPlugin

• ModifiersPlugin [قسمت ۲] ModifiersPlugin [Part 2]

• EndArrayPlugin EndArrayPlugin

• SnapPlugin SnapPlugin

ایزهای اضافی [بسته ایز] Extra Eases [Ease Pack]

• ExpoScaleEase [قسمت ۱] ExpoScaleEase [Part1]

• ExpoScaleEase [قسمت ۲] ExpoScaleEase [Part2]

• ExpoScaleEase [قسمت ۳] ExpoScaleEase [Part3]

• ExpoScaleEase [قسمت ۴] ExpoScaleEase [Part4]

• ExpoScaleEase [قسمت ۵] ExpoScaleEase [Part5]

پلاگین‌های اضافی GSAP GSAP Extra Plugins

• TextPlugin [قسمت ۱] TextPlugi [Part 1]

• TextPlugin [قسمت ۲] TextPlugi [Part 2]

• TextPlugin [قسمت ۳] TextPlugi [Part 3]

• TextPlugin [قسمت ۴] TextPlugi [Part 4]

• TextPlugin [قسمت ۵] TextPlugi [Part 5]

• Draggable [قسمت ۱] Draggable [Part 1]

• Draggable [قسمت ۲] Draggable [Part 2]

• Draggable [قسمت ۳] Draggable [Part 3]

• Flip [قسمت ۱] Flip [Part 1]

• Flip [قسمت ۲] Flip [Part 2]

• Flip [قسمت ۳] Flip [Part 3]

• Flip [قسمت ۴] Flip [Part 4]

• Flip [قسمت ۵] Flip [Part 5]

• ScrollTrigger [قسمت ۱] ScrollTrigger [Part1]

• ScrollTrigger [قسمت ۲] ScrollTrigger [Part2]

• ScrollTrigger [قسمت ۳] ScrollTrigger [Part3]

• ScrollTrigger [قسمت ۴] ScrollTrigger [Part4]

• ScrollTrigger و ScrollToPlugin [پارالاکس] [قسمت ۱] ScrollTrigger & ScrollToPlugin [Parallax] [Part1]

• ScrollTrigger و ScrollToPlugin [پارالاکس] [قسمت ۲] ScrollTrigger & ScrollToPlugin [Parallax] [Part2]

• ScrollTrigger و ScrollToPlugin [پارالاکس] [قسمت ۳] ScrollTrigger & ScrollToPlugin [Parallax] [Part3]

• ScrollTrigger و ScrollToPlugin [پارالاکس] [قسمت ۴] ScrollTrigger & ScrollToPlugin [Parallax] [Part4]

نمایشگاه الهام Showcase for Inspiration

• اسکرول صفحه [قسمت ۱] Page scrolling [Part1]

• اسکرول صفحه [قسمت ۲] Page scrolling [Part2]

• اسکرول صفحه [قسمت ۳] Page scrolling [Part3]

• گالری تصاویر [قسمت ۱] Image Galleries [Part 1]

• گالری تصاویر [قسمت ۲] Image Galleries [Part 2]

• پارالاکس [قسمت ۱] Parallax [Part 1]

• پارالاکس [قسمت ۲] Parallax [Part 2]

• کمی خلاقیت [قسمت ۱] A bit of Creativity [Part 1]

• کمی خلاقیت [قسمت ۲] A bit of Creativity [Part 2]

• کمی خلاقیت [قسمت ۳] A bit of Creativity [Part 3]

بخش جایزه Bonus section

• اطلاعات Information

• انیمیشن وب تعاملی. موقعیت‌دهی سه‌بعدی (قسمت ۱) Interactive Web Animation. 3d Positioning (Part1)

• انیمیشن وب تعاملی. موقعیت‌دهی سه‌بعدی (قسمت ۲) Interactive Web Animation. 3d Positioning (Part2)

• انیمیشن وب تعاملی. موقعیت‌دهی سه‌بعدی (قسمت ۳) Interactive Web Animation. 3d Positioning (Part3)

• انیمیشن وب تعاملی. درس نمونه [قسمت ۱] Interactive Web Animation. Demo lesson [part 1]

• انیمیشن وب تعاملی. درس نمونه [قسمت ۲] Interactive Web Animation. Demo lesson [part 2]

• انیمیشن وب تعاملی. درس نمونه [قسمت ۳] Interactive Web Animation. Demo lesson [part 3]

• انیمیشن وب تعاملی. درس نمونه [قسمت ۴] Interactive Web Animation. Demo lesson [part 4]

• عنصر HTML Canvas [مقدمه]. قسمت ۱ HTML Canvas element [Introduction]. Part1

• عنصر HTML Canvas [مقدمه]. قسمت ۲ HTML Canvas element [Introduction]. Part2

• عنصر HTML Canvas [مقدمه]. قسمت ۳ HTML Canvas element [Introduction]. Part3

• Canvas و Web Audio API [تصویرگر صوتی]. قسمت ۱ Canvas & Web Audio API [Audio Visualizer]. Part1

• Canvas و Web Audio API [تصویرگر صوتی]. قسمت ۲ Canvas & Web Audio API [Audio Visualizer]. Part2

• Canvas و Web Audio API [تصویرگر صوتی]. قسمت ۳ Canvas & Web Audio API [Audio Visualizer]. Part3

• Canvas و Web Audio API [تصویرگر صوتی]. قسمت ۴ Canvas & Web Audio API [Audio Visualizer]. Part4

• Canvas و Web Audio API [تصویرگر صوتی]. قسمت ۵ Canvas & Web Audio API [Audio Visualizer]. Part5

• دستکاری پیکسل Canvas [شیء ImageData]. قسمت ۱ Pixel canvas manipulation [ImageData object]. Part1

• دستکاری پیکسل Canvas [شیء ImageData]. قسمت ۲ Pixel canvas manipulation [ImageData object]. Part2

• دستکاری پیکسل Canvas [شیء ImageData]. قسمت ۳ Pixel canvas manipulation [ImageData object]. Part3

• دستکاری پیکسل Canvas [شیء ImageData]. قسمت ۴ Pixel canvas manipulation [ImageData object]. Part4

• دستکاری پیکسل Canvas [شیء ImageData]. قسمت ۵ Pixel canvas manipulation [ImageData object]. Part5

• مقدمه‌ای بر Chart.js [قسمت ۱] Introduction to Chart.js [Part 1]

• مقدمه‌ای بر Chart.js [قسمت ۲] Introduction to Chart.js [Part 2]

• مقدمه‌ای بر Chart.js [قسمت ۳] Introduction to Chart.js [Part 3]

• مقدمه‌ای بر Chart.js [قسمت ۴] Introduction to Chart.js [Part 4]

• مقدمه‌ای بر Chart.js [قسمت ۵] Introduction to Chart.js [Part 5]

• مقدمه‌ای بر Chart.js [قسمت ۶] Introduction to Chart.js [Part 6]

• گام بعدی چیست؟ What's next?