Before/After Sliders

JuxtaposeJS helps storytellers compare two pieces of similar media, including photos, and gifs. It’s ideal for highlighting then/now stories that explain slow changes over time (grown of a city skyline, regrowth of a forest, etc.) or before/after stories that show the impact of single dramatic events (natural disasters, protests, wars, etc.).

It is free, easy to use, and works on all devices. All you need to get started are links to the images you’d like to compare.

Historical
Development
Natural Disasters
Political Developments

Development

See how Manhattan’s new skyscrapers will cast shadows on Central Park

Natural Disasters

Satellite Photos of Before and After Quake in Turkey

Satellite Photos of Japan, Before and After the Quake and Tsunami

Side-by-Side Look at Destruction and Renewal in Japan

Poison in the haze: documenting life under Ahvaz’s oppressive orange skies

Political Stories

Satellite images show crowds at China’s crematoriums as covid surges

Head Shot/Change Over Time

NBA’s oldest players
Kennedy half-dollar

Steps:

1) Find pictures that illustrate a before and after scene. Upload both to your Google drive.

2) Get a Dropbox account. If you already have one, upload your images. Right click on the file, or click on the Get Link. Copy the links, insert the two URL’s.

3) Add any additional dates, etc.

4) Copy both sets of code into a post on your portfolio site in the text mode. Publish and send the URL along with the other homework.