SuperHi FM

Search:

Catalog Cart About Sign in

Animation for the Web

Jessie Cullen

Chapter 02

Jessie Cullen

Links + downloads

Chapter resources

Chapter URL

Videos

Lesson 01

Welcome to the project!

Lesson 02

Let's set up our page

Lesson 03

Adding a layout

Lesson 04

What are CSS keyframes and CSS animations?

Lesson 05

Adding looping and repeating animations

Lesson 06

How to apply easing to CSS animation

Lesson 07

Making an SVG image from scratch

Lesson 08

Applying CSS to SVG tags

Lesson 09

SVG viewbox and preserveAspectRatio

Lesson 10

Hover states with SVG

Lesson 11

Making our lives easier with exporting SVGs from Figma

Lesson 12

Fill screen and blend modes

Lesson 13

Using CSS animations with SVG tags

Lesson 14

Adding a CSS filter

Lesson 15

Using Javascript for fade out the header on scroll

Lesson 16

Adding Javascript easing

Lesson 17

Tying scroll events to our blobs

Lesson 18

Changing the blob scale per section

Lesson 19

Adding multiple blobs per section

Lesson 20

Custom CSS scrollbar

Lesson 21

Homework: Fade out the arrow on scroll

Lesson 22

Homework solution

SuperHi FM

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

4th Kind

Next: Chapter 03

4th Kind

Seamstress

Back: Chapter 01

Seamstress

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

How exactly do we take a simple portfolio and make it look completely different? With animation, course! In this project we talk about SVGs, how to change SVG shapes with CSS and add in scroll effects.

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