SuperHi FM

Search:

Catalog Cart About Sign in

Animation for the Web

Seal Street Photography Studio

Chapter 05

Seal Street Photography Studio

Links + downloads

Chapter resources

Chapter URL

Videos

Lesson 01

Welcome to Seal Street Photo Studio!

Lesson 02

Setting up our page content and style

Lesson 03

Sticky poositioning

Lesson 04

What is an Intersection Observer

Lesson 05

Applying styling to our observer

Lesson 06

prefers-reduced-motion Media Query

Lesson 07

Scroll-jacking with CSS Scroll Snap

Lesson 08

Adding our captions

Lesson 09

CSS clip path

Lesson 10

Variation: Adding clip-path to CSS animation

Lesson 11

Adding typography and layers

Lesson 12

Adding a rotation layer

Lesson 13

Changing rotation on mousemove

Lesson 14

Adding a media query for reduced motion

Lesson 15

Setting up our intro sequence

Lesson 16

Animating our inbox box

Lesson 17

Adding fixes and optimizations

SuperHi FM

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

Wakefast

Next: Chapter 06

Wakefast

Home Planet

Back: Chapter 04

Home Planet

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

Down on Seal Street, we're wanting to make something more than a simple photo website. In this project, we add in sticky scrolling, wipe effects and fade effects, along with a sprinkle of GSAP timelines.

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