gregoryamaefule / frontend-masters-css

Frontend Masters CSS Animations Workshop

Welcome to the Frontend Masters CSS Animations Workshop! In this workshop, you will:

• Learn how to design meaningful animations that improve the user experience in websites and web apps
• Become proficient in creating animations with CSS and JavaScript
• Craft consistent motion design with CSS variables
• Create choreographed, synchronized animation sequences
• Make CSS animations reactive and dynamic with JavaScript
• Orchestrate animated transitions easily with state machines
• Get inspired and experience many animation demos

Getting started

1. Clone this repo
2. Install npm dependencies:

npm install # or yarn

3. Run the project in dev mode:

npm run dev # or yarn dev

4. Go to localhost:3000 to see the running app.

You should now be able to access each of the sections:

• Lesson 00: Fundamentals
• Lesson 01: Transitions
• Lesson 02: Keyframe Animations
• Lesson 03: Choreography
• Lesson 04: States
• Lesson 05: Layout Animations
• Lesson 06: Reactive Animations
• Inflight Example