آموزش مسترکلاس انیمیشن GSAP: تسلط آسان بر انیمیشن‌های وب - آخرین آپدیت

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

Introduction

• مقدمه Introduction

پیاده‌سازی GSAP GSAP implementation

• پیاده‌سازی GSAP GSAP implementation

ویژگی‌ها و متد انیمیشن GSAP GSAP animation properties and method

• ویژگی‌ها و متد انیمیشن GSAP GSAP animation properties and method

تایم لاین در GSAP - ایجاد اولین تایم لاین شما Timeline in GSAP Create Your First Timeline

• تایم لاین در GSAP - ایجاد اولین تایم لاین شما Timeline in GSAP Create Your First Timeline

اسکرول تریگر GSAP GSAP scroll Trigger

• نحوه استفاده از اسکرول تریگر how to use scroll Trigger

• اسکرول تریگر برای انیمیشن‌های متعدد و Scrub Scroll Trigger multiple animation and scrub

• اسکرول تریگر با Pin scroll Trigger with pin

انیمیشن GSAP با گرافیک SVG GSAP Animation With SVG Graphic

• انیمیشن GSAP با گرافیک SVG GSAP Animation With SVG Graphic

• المان مسیر SVG svg path element

• ایجاد انیمیشن‌های Slick SVG بخش 3 Create Slick SVG Animations part 3

پروژه 1 Project 1

• ساخت انیمیشن نشانگر ماوس سفارشی (Custom Cursor) Buld a Custom Cursor animation

• ساخت انیمیشن نشانگر ماوس سفارشی (Custom Cursor) بخش 2 Buld a Custom Cursor animation Part 2

پروژه 2 Project 2

• ایجاد طرح‌های تایم لاین متحرک Create Animated Timeline Designs

پروژه 3 Project 3

• ایجاد انیمیشن‌های متن خیره‌کننده با GSAP بخش 1 Create Stunning Text Animations with GSAP part 1

• ایجاد انیمیشن‌های متن خیره‌کننده با GSAP بخش 2 Create Stunning Text Animations with GSAP part 2

پروژه 4 Project 4

• انیمیشن متن اسکرول شونده Scrolling text animation

• انیمیشن متن اسکرول شونده بخش 2 scrolling text animation Part 2

پروژه 5: انیمیشن تغییر شکل SVG با GSAP Project 5 :SVG Shape Morphing Animation with GSAP

• انیمیشن تغییر شکل SVG بخش 2 SVG Shape Morphing Animation part 2

• انیمیشن تغییر شکل SVG بخش 1 SVG Shape Morphing Animation part 1

پروژه 6: ساخت وبسایت متحرک با GSAP Project 6 : Build an Animated Website with GSAP

• ساخت نوار ناوبری صفحه فرود (landing page) build navigation bar of landing page

• ساخت بخش سرصفحه (header) build header section

• چیدمان لوگو و گرافیک arrange the logo and the graphic

• شروع طراحی بخش سرویس start designing the service section

• استایل‌دهی به بلاک‌های سرویس styling the services block

• اعمال انیمیشن GSAP به بخش 1 apply GSAP animation to Section 1

• اعمال اسکرول تریگر با تایم لاین apply scroll Trigger with timeline

• متحرک سازی المنت‌های باکس در کنار یکدیگر animate the box elements side by side