The scrollytelling piece toggles the opacity of different layers on an SVG depicting the ice in the Arctic. These are the steps & accompanying actions:
January 2018 ice is visible
Loop through all months in 2018 (Jan - Dec) & show ice for each month. Legend label is updated for each month.
Show ice for March 2018 & Median line for March 2018. Legend label is updated.
Loop through March 2017, March 2016, March 2015 and show their ice areas on top of the March 2018 ice. I'm waiting on Tucker's feedback before adding manipulations to this step's legend label
Show September 2018 ice & median line. Legend label is updated.
Layers are grouped according to which step they correspond with, but because some months are shown multiple times, it was necessary to control opacity on the individual month layers as well. Month layers have an ID that follows this format: sc_monthYear. The median lines follow this naming convention: sc_monthYear-av.
To account for what happened when the user scrolls backwards, the start of each step reverts any other steps' changes. This was a bit of a messy process because of how ScrollMagick handles this, so feedback on cleaning that up would be great.
I also added the accent color for the whole piece.
This PR has been updated with two additional pieces of functionality & adjustments on the mobile styles.
After looping through all months in 2018, the "Month" changes to a dropdown and the user is able to select which month they want to view.
After looping through all years when viewing the ice in the month of March, users have the ability to click on the legend and toggle on/off the respective layers.
The scrollytelling piece toggles the opacity of different layers on an SVG depicting the ice in the Arctic. These are the steps & accompanying actions:
Layers are grouped according to which step they correspond with, but because some months are shown multiple times, it was necessary to control opacity on the individual month layers as well. Month layers have an ID that follows this format:
sc_monthYear
. The median lines follow this naming convention:sc_monthYear-av
.To account for what happened when the user scrolls backwards, the start of each step reverts any other steps' changes. This was a bit of a messy process because of how ScrollMagick handles this, so feedback on cleaning that up would be great.
I also added the accent color for the whole piece.