iwm.org.uk/history/dday / Developed at Staak
Tools & Skills:
Vue.js, ScrollMagic, GSAP
About the project:
Off the back of the success of the HMS Belfast 80th anniversary website, Staak were again invited to collaborate with The IWM to develop an interactive website to commemorate the 75th anniversary of the D-Day landings and provide a unique framework to tell the stories of those involved.
We opted to split the enormous catalogue of visual and written content of the D-Day landings into what became the 3 main ‘timelines’ of the website: Land, Sea & Air. To differentiate between the timelines, we created a mechanic whereby the scroll direction of content morphed when a new timeline was in view.
A helpful side menu was integrated so users could click and navigate to a specific piece of content should they be a returning visitor or knew which section they wished to explore.
We also crafted ‘factoids’ - prompts which labelled images. When these were clicked, they gave the user further information on that topic or showcased a particularly interesting story in more detail.
The website navigation was laid out in the same way as the content scroll, so users could get a sense of the nested timeline of events and the wider narrative of the conflict.
D-Day 75th Anniversary.
Some elements on the website show a red plus icon which users can click to read more about specific items shown in an image.
The events of D-Day were separated into sections and split up on the website using vertical and horizontal scrolling.