CF

Whimsical Animations

5h 7m 31s
English
Paid

Whimsical Animations is a 50-lesson 5 hours 7 minutes self-paced course by Josh Comeau. Whimsical Animations helps you build smooth and fun web effects.

Course facts

Lessons
50
Duration
5 hours 7 minutes
Level
All levels
Language
English
Updated
Instructor
Josh Comeau
Price
Premium

Whimsical Animations helps you build smooth and fun web effects. You will learn how to make small touches and clear moments that guide the user. You use CSS, JavaScript, SVG, and Canvas to do this work.

Why Animations Matter

Good animation does more than look nice. It gives users clear feedback and makes each step feel natural. Many teams focus on this because it shapes how people see your product.

You may know simple CSS transitions. But complex effects can feel out of reach at first. I felt the same when I saw strong examples online and had no clue how they worked.

How You Learn

I built these skills over time. I learned how SVG and Canvas let you draw shapes and scenes that HTML alone cannot create. I studied many small tricks needed for rich effects. I also learned how to design motion so it helps the user rather than slows them down.

This course gives you the same path. You watch short lessons, try hands-on tasks, and build your own effects. You practice each idea so you can use it in real work.

About AI and Animation

You may wonder if AI will handle this soon. AI can help with simple moves, but complex effects still need your eye and your choices. Deep control of timing, shape, and flow is human work for now.

This course shows you how to design and build custom motion that stands out. These skills stay useful for a long time.

Course Parts

Part I: Particle Effects

  • Build procedural particle systems
  • Fix slow frames and measure speed
  • Connect effects to React

Part II: The Magic of SVG

  • Work with shapes, lines, and paths
  • Use spring effects and visual tricks
  • Render and control SVG inside React

Part III: Advanced Interactions (Coming Soon)

  • React to mouse input
  • Add parallax and layered scenes
  • Handle route changes with motion

Part IV: HTML Canvas (Coming Soon)

  • Know when to choose Canvas over SVG
  • Work with physics, noise, and shaders
  • Plan for speed on large scenes

Bonus: Animation Design

  • Shape ideas into clear motion steps
  • Guide the user without distraction

Bonus: Animation Challenges

  • Rebuild real effects
  • Compare your work with my solutions

Who teaches Whimsical Animations? Josh Comeau

Josh Comeau thumbnail

Josh Comeau is a Canadian developer and one of the most cited independent voices on modern CSS and React — known for the unusual care and clarity of his teaching. He runs joshwcomeau.com (a long-running technical blog), publishes the CSS for JavaScript Developers course (one of the most highly-regarded modern CSS resources), and the Joy of React course.

His CourseFlix listing carries three Josh Comeau courses: The Joy of React, CSS for JavaScript Developers, and Whimsical Animations. The teaching style favours interactive examples, animated explanations, and unusually patient pacing — Josh's courses are widely cited as some of the highest-quality material in the modern web-development education market.

Material is paid and aimed at intermediate web developers ready to deepen their craft. For broader content, see CourseFlix's React.js, CSS, and Web Animations category pages.

What lessons are included in Whimsical Animations?

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 50 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: 004 [MAIN] Particle Generation
All Course Lessons (50)
#Lesson TitleDurationAccess
1
004 [MAIN] Particle Generation Demo
11:34
2
010 [MAIN] Particle Cleanup
05:50
3
019 [MAIN] wham-01-01-01-starry-night-exercise
06:42
4
023 [MAIN] 01-02-01-shimmer-button-solution
05:31
5
034 [MAIN] wham-01-04-dispersion
07:41
6
037 [MAIN] 01-04-01-alternative-approach
04:15
7
050 [MAIN] wham-01-04-03-raining-emoji-exercise
07:00
8
054 [MAIN] 01-05-02-custom-curves
06:39
9
068 [MAIN] wham-01-06.01-dynamic-keyframe-rotating-bar-exercise-solution
04:00
10
072 [MAIN] wham-01-06.01-bouncing-balls-exercise-solution
04:26
11
074 [MAIN] wham-01-07-polar-coordinates
09:41
12
081 [MAIN] wham-01-07-01-trigonometry-101
06:30
13
086 [MAIN] wham-01-07-02-magic-wand-exercise-solution
09:16
14
090 [MAIN] wham-01-07-02-rocketship-exercise-solution
09:25
15
092 [MAIN] wham-01-07-03-evaluating-performance
10:28
16
096 [MAIN] wham-01-08-particle-distribution
04:20
17
101 [MAIN] wham-01-09-linear-interpolation
06:02
18
110 [MAIN] wham-01-09-01-wham-final-exercise-solution
05:42
19
118 [MAIN] wham-01.10.01-shimmer-revisited-exercise-solution
03:27
20
121 [MAIN] 01-10-01-magic-wand-revisited-solution
05:00
21
124 [MAIN] wham-01-11-01-dynamic-tweaks
09:59
22
131 [MAIN] wham-01-11-02-pop-circle
08:19
23
134 [MAIN] wham-01-11-02-swelling-heart
04:53
24
149 [MAIN] wham-01-13-01-particles-in-react
11:10
25
171 [MAIN] wham-02-01-02-emoji-01-mouthless
02:44
26
173 [MAIN] wham-02-01-02-emoji-02-neutral
02:18
27
175 [MAIN] wham-02-01-02-emoji-03-smiling
02:08
28
177 [MAIN] wham-02-01-02-spark-line-exercise-solution
04:08
29
178 [MAIN] react-trend-v2
00:06
30
202 [MAIN] wham-02-03-intro-to-paths
04:20
31
219 [MAIN] wham-02-03-04-ex-path-circuit
06:39
32
236 [MAIN] wham-02-04-01-motion
05:28
33
244 [MAIN] wham-02-04-02-ex-blinking-emoji
02:46
34
247 [MAIN] wham-02-04-02-ex-hamburger-to-x
05:28
35
253 [MAIN] wham-02-04-02-ex-play-to-stop
05:33
36
263 [MAIN] wham-02-07-self-drawing
06:48
37
276 [MAIN] wham-02-07-01-ex-circular-progress-bar
05:31
38
280 [MAIN] wham-02-07-01-ex-electrical-wiring
08:20
39
293 [MAIN] wham-02-08-05-ex-toast-popup
04:29
40
299 [MAIN] wham-02-10-masks
05:39
41
310 [MAIN] wham-02-10-01-ex-filling-heart
07:38
42
317 [MAIN] wham-02-10-01-ex-popping-circle-revisited
05:34
43
322 [MAIN] wham-02-10-01-ex-improved-self-drawing
01:57
44
325 [MAIN] wham-02-10-02-mask-gotcha-transforms
04:02
45
356 [MAIN] wham-ad-00-intro
04:30
46
373 [MAIN] wham-ad-00.02-common-mistake
09:12
47
410 [MAIN]wham-ad-asymmetrical-animations
06:25
48
421 [MAIN] wham-ad-02.03-action-driven-edge-case
06:52
49
450 [MAIN] wham-ad-04.01-sound-prep
04:35
50
460 [MAIN] wham-ad-05-figma-swoops
16:31
Unlock unlimited learning

Get instant access to all 49 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

What courses are similar to Whimsical Animations?

Frequently asked questions

What prerequisites should I have before taking this course?
Prospective students should have a basic understanding of CSS and JavaScript, as these are the primary languages used for creating animations in the course. Familiarity with simple CSS transitions will be beneficial, though the course starts with foundational topics like particle generation and builds up to more complex effects.
What projects will I build during the course?
Throughout the course, students will work on various animation projects such as creating particle systems, designing custom curves, and implementing dynamic keyframe animations. Specific exercises include a 'starry night' effect, a 'raining emoji' animation, and a 'dynamic keyframe rotating bar' project.
Who is the target audience for this course?
This course is aimed at web developers and designers who want to enhance their skills in creating visually engaging web animations. It is suitable for those who have a basic understanding of web technologies and are looking to explore advanced animation techniques using CSS, JavaScript, SVG, and Canvas.
How does the depth of this course compare to other animation courses?
This course provides hands-on experience with procedural particle systems, animation in React, and advanced topics like asymmetrical animations and sound integration. It goes beyond simple animations by focusing on custom motion design and performance evaluation, setting it apart from standard animation courses.
Which specific tools and platforms are covered in the course?
The course covers tools and platforms such as CSS for styling, JavaScript for scripting animations, SVG for drawing shapes, and Canvas for creating complex visual effects. Additionally, some lessons involve integrating animations with React and learning how to use Figma for designing animation paths.
What topics are not covered in this course?
While the course covers a broad range of animation techniques, it does not focus on 3D animations or animation in mobile apps. The primary focus is on web-based animations using CSS, JavaScript, SVG, and Canvas.
How much time should I expect to commit to this course?
The course consists of 50 lessons, each designed to be concise and focused on specific animation techniques. Students should expect to spend several hours per week on lessons and exercises, depending on their pace and prior experience with animation concepts.