Animated viewport entry

A deep blue lake sits in the middle of vast hills covered with evergreen trees
Lake Walchen

nature

A close, profile view of a crocodile looking directly into the camera
Crocodile

animal

SpaceX launches a Falcon 9 rocket from Cape Canaveral Air Force Station
SpaceX

space

SpaceX launches a Falcon 9 rocket from Cape Canaveral Air Force Station

A multi-level highway stack interchange in Puxi, Shanghai
Crossroads

city

Dimly lit mountains give way to a starry night showing the Milky Way
Milky Way

space, nature

NASA Satellite view of Earth
Earth

space

NASA Satellite view of Earth

A close up of a turtle underwater
Turtle

animal

A close up of a turtle underwater

Many trees stand alonside a hill which overlooks a pedestrian path, next to the ocean at Stanley Park in Vancouver, Canada
Stanley Park

nature

An intrigued cat sits in grass next to a flag planted in front of it with an astronaut space kitty sticker on beige fabric.
Astronaut Cat

animal

Looking down on central park and the surrounding builds from the Rockefellar Center
Central Park

nature, city

A deep blue lake sits in the middle of vast hills covered with evergreen trees
Lake Walchen

nature

A close, profile view of a crocodile looking directly into the camera
Crocodile

animal

SpaceX launches a Falcon 9 rocket from Cape Canaveral Air Force Station
SpaceX

space

SpaceX launches a Falcon 9 rocket from Cape Canaveral Air Force Station

A multi-level highway stack interchange in Puxi, Shanghai
Crossroads

city

Dimly lit mountains give way to a starry night showing the Milky Way
Milky Way

space, nature

NASA Satellite view of Earth
Earth

space

NASA Satellite view of Earth

A close up of a turtle underwater
Turtle

animal

A close up of a turtle underwater

Many trees stand alonside a hill which overlooks a pedestrian path, next to the ocean at Stanley Park in Vancouver, Canada
Stanley Park

nature

An intrigued cat sits in grass next to a flag planted in front of it with an astronaut space kitty sticker on beige fabric.
Astronaut Cat

animal

Looking down on central park and the surrounding builds from the Rockefellar Center
Central Park

nature, city

A deep blue lake sits in the middle of vast hills covered with evergreen trees
Lake Walchen

nature

A close, profile view of a crocodile looking directly into the camera
Crocodile

animal

SpaceX launches a Falcon 9 rocket from Cape Canaveral Air Force Station
SpaceX

space

SpaceX launches a Falcon 9 rocket from Cape Canaveral Air Force Station

A multi-level highway stack interchange in Puxi, Shanghai
Crossroads

city

Dimly lit mountains give way to a starry night showing the Milky Way
Milky Way

space, nature

NASA Satellite view of Earth
Earth

space

NASA Satellite view of Earth

A close up of a turtle underwater
Turtle

animal

A close up of a turtle underwater

Many trees stand alonside a hill which overlooks a pedestrian path, next to the ocean at Stanley Park in Vancouver, Canada
Stanley Park

nature

An intrigued cat sits in grass next to a flag planted in front of it with an astronaut space kitty sticker on beige fabric.
Astronaut Cat

animal

Looking down on central park and the surrounding builds from the Rockefellar Center
Central Park

nature, city

About this demo

This was inspired by codrops’ demo Loading effects for grid items with css animations.

IntersectionObserver is used to determine when the elements enter the viewport. A polyfill is included on the page for browsers which don't support it.

Source code for this demo

Link to demo source