Archi's Academy

BLACK FRIDAY

85% Discount for all November

whatsapp
Get in touch
FreeFrontendintermediate

Mastering GreenSock Animation

An immersive hands-on lessons covering basics to advanced animation techniques from tweens, timelines and easing to staggered animations and more

2 weeksEN11 lessons360 enrolled

StartFreeCourse

StartFreeCourse
button-icon
Mastering GreenSock Animation

Course Curriculum

1 modules · 6 subjects · 11 lessons
01
GSAP3Comprehensive GreenSock Animation Platform (GSAP) Course for Web Animations
6 subjects
Introduction to GSAPLearn about GSAP and how to quickly start animating in an interactive environment with CodePen.
1 lessons
  • Getting StartedUnderstand what GSAP is, why it is widely adopted, and how you can set it up to create your first animations using CodePen.
Core GSAP ConceptsNew Description
2 lessons
  • Tweens and TimelinesUnderstand how objects, tweens, and timelines interact in GSAP to create smooth, complex animations.
  • Special PropertiesExplore GSAP’s delay, repeat, and repeatDelay properties to control timing.
Easing and StaggeringLearn to smooth animations with easing and create dynamic effects with staggered motion.
2 lessons
  • Easing FundamentalsUnderstand how easing functions affect motion and how to use the GreenSock Ease Visualizer.
  • Staggering AnimationsCreate staggered animations to animate multiple elements with controlled delays.
Working with TimelinesDive deeper into GSAP timelines, learning how to structure complex animations.
2 lessons
  • Timeline PositioningMaster GSAP’s position parameter and how to align animations in timelines.
  • Efficient Animation CodeReduce code complexity and enhance maintainability using GSAP’s features.
Advanced SVG and CSS TechniquesUnlock the power of SVG and CSS when combined with GSAP for creative animations.
3 lessons
  • SVG EffectsLearn ripple masks, path conversions, and wire animations using GSAP and SVG tools.
  • TransformationsMaster transformOrigin and responsive animation scaling using GSAP and CSS.
  • Creative Masking and ParticlesUse CSS container queries, masking, and SVG particles with GSAP for artistic effects.
Creative GSAP ProjectsBuild fun, interactive projects with GSAP that combine mouse movement, scroll, masking, and particles.
1 lessons
  • Interactive MotionExplore creative uses of GSAP like mouse followers and fullscreen scroll animations.

Skill Track

Frontend

Ideal for client side

Related Courses

Ready to Start Learning?

Access this course for free and build real skills.

StartFreeCourse

StartFreeCourse
button-icon