SuperHi FM

Search:

Catalog Cart About Sign in

Animation for the Web

4th Kind

Chapter 03

4th Kind

Links + downloads

Chapter resources

Chapter URL

Videos

Lesson 01

Welcome to 4th Kind!

Lesson 02

Let's set up our page

Lesson 03

Adding our typography and links

Lesson 04

Adding dark mode with a media query

Lesson 05

CSS Variables for themeing

Lesson 06

Updating our dark mode

Lesson 07

User-triggered dark mode

Lesson 08

Adding our navigation

Lesson 09

Toggling our navigation

Lesson 10

Adding raw SVGs to our site

Lesson 11

Adding a menu icon animation

Lesson 12

Dark mode toggle animation

Lesson 13

Adding a triple-nav animation

Lesson 14

Dark mode wiper effect

Lesson 15

Adding our central animation

Lesson 16

Shifting our site on menu open

Lesson 17

The MorphSVG plugin

SuperHi FM

Want some ambient music in the background? Play our radio station!

Home Planet

Next: Chapter 04

Home Planet

Jessie Cullen

Back: Chapter 02

Jessie Cullen

Feeling stuck?

Don’t worry, we are here to help you with:

Speedy help from one of our team members
Detailed, relevant solutions
Direct access to peer support through Discord!

Remember, there’s no such thing as a silly question, so don’t hesitate to reach out, we love hearing from you!

© 2024 SuperHi, Inc.

Learn

All courses Code Design Project management SuperHi Editor

Company

About Student work SuperHi for Business NEW Careers Newsletter

Support

Return policy Terms of use Discrimination policy Code of conduct Contact us

In the 4th Kind project, we focus more on how to change SVGs within the page itself – from making a burger menu icon toggle to an interactive spiral-style effect – along with adding CSS variables for the site's dark mode

Private notes

A place for you to post notes about anything on this page. Only you can view your notes.

Sign in to save notes