Whimsical Animations

5h 7m 31s
English
Paid

Course description

Learn how to create charming interactions and amazing details using the magic of CSS, JavaScript, SVG, and Canvas. I'll share all my tricks in this course!

Creating "wow" level animations for the web is not easy. I've experienced it myself: I saw stunning animations online that seemed like real magic - they were far beyond the simple CSS transitions I knew, and I had no idea where to start.

Over the years, I've built up the missing skills step by step. I learned how to use SVG and Canvas for dynamic illustrations, impossible in pure HTML. I've dissected dozens of niche techniques needed for really cool effects. I've learned how to design animations and interactions so that they enhance usability rather than hinder it.

Read more about the course

Now I want to teach you this.

Whimsical Animations is an interactive online course. It's not just video lessons - you will be experimenting practically, solving tasks, and creating your own amazing animations. It's unlike regular courses (unless you've already taken something similar with me - then the format will be familiar).

Animations turned out to be much more important than they might seem at first glance. It might appear to be just decoration, but that's exactly why companies like Apple and Stripe pay so much attention to it. In this course, I will teach you a skill set that very few web developers possess, but which are in demand in many projects.

If you've ever wondered how I implemented a particular effect - there's a high chance we'll cover it here. Over the years, I've gathered many impressive techniques and powerful methods, and I'm eager to share them with you!

As for robots (attention!) - you might be thinking: won't this become outdated by 2025? Can't AI agents already do everything for us?

I believe that while language models excel at many tasks, they are far from being masters of animation. They can help with simple transitions, but for the effects I create, deep manual work is still required. Knowledge and understanding remain key.

This course is about how to design and implement unique, custom animations for the web. This is something AI is unlikely to take over anytime soon.

Here are some parts of the course:

  • Part I: Particle Effects - dynamic procedural particle effects, fundamental techniques, performance debugging, interaction with React
  • Part II: The Magic of SVG - how to work with SVG: individual shapes, lines, visualizations, spring effects, and integration with React
  • Part III: Advanced Interactions - Coming Soon! - more complex interactions: mouse reactions, parallax, route changes, and more
  • Part IV: Working with HTML Canvas - Coming Soon! - when to use Canvas instead of SVG, performance, physics, noise, and visual effects
  • Bonus: Animation Design - principles of animation design: from idea to sequence, how not to annoy the user
  • Bonus: Animation Challenges - additional tasks: recreating effects and comparing them with my solutions

Watch Online

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Serverless Handbook for frontend engineers

Serverless Handbook for frontend engineers

Sources: Swizec Teller
Serverless Handbook is a book for frontend developers that provides a detailed explanation of serverless architecture. Over 360 pages, it covers topics such as.
Web Components For Beginners

Web Components For Beginners

Sources: leveluptutorials
Web Components are a set of features that provide a standard component model for the Web[1] allowing for encapsulation and interoperability of individual HTML e
3 hours 1 minute 52 seconds
Web Security Dev Academy - 12-week online program

Web Security Dev Academy - 12-week online program

Sources: Bartosz Pietrucha
Master the full picture of web security and learn to develop secure full-stack applications with reliable authentication, protection against vulnerabilities...
16 hours 37 minutes 20 seconds