{"id":19446125,"url":"https://github.com/stitchfix/hello-scrollytelling","last_synced_at":"2026-07-18T12:30:17.389Z","repository":{"id":143399468,"uuid":"85764866","full_name":"stitchfix/hello-scrollytelling","owner":"stitchfix","description":"A bare-bones version of the scrollytelling framework used in the Algorithms Tour","archived":false,"fork":false,"pushed_at":"2020-10-04T09:59:22.000Z","size":991,"stargazers_count":53,"open_issues_count":2,"forks_count":14,"subscribers_count":87,"default_branch":"master","last_synced_at":"2025-01-07T22:53:34.463Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://stitchfix.github.io/hello-scrollytelling/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stitchfix.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-03-21T23:46:01.000Z","updated_at":"2024-11-26T17:31:05.000Z","dependencies_parsed_at":null,"dependency_job_id":"fba21827-9f4b-427e-8a55-45b63c9f7617","html_url":"https://github.com/stitchfix/hello-scrollytelling","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stitchfix%2Fhello-scrollytelling","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stitchfix%2Fhello-scrollytelling/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stitchfix%2Fhello-scrollytelling/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stitchfix%2Fhello-scrollytelling/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stitchfix","download_url":"https://codeload.github.com/stitchfix/hello-scrollytelling/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240630721,"owners_count":19832123,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-10T16:13:00.580Z","updated_at":"2026-07-18T12:30:17.337Z","avatar_url":"https://github.com/stitchfix.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Hello Scrollytelling!\n\nThis is a bare bones version of the scrollytelling structure underlying the [Stitch Fix Algorithms Tour](http://algorithms-tour.stitchfix.com), the full source code for which is [here](https://github.com/stitchfix/algorithms-tour). It is based on Jim Vallandingham's concepts and code for scrollytelling with D3, which is explained [here](http://vallandingham.me/scroller.html), demonstrated [here](http://vallandingham.me/scroll_demo/) and coded [here](https://github.com/vlandham/scroll_demo).\n\nIn our Algorithms Tour, we used a lot of svg drawings and [d3.timer](https://github.com/d3/d3-timer)-based animations, both of which are demonstrated here. Also included here is some math in svg, using a combination of Computer Modern fonts (the same fonts used as the Latex defaults) and outlined-path symbols where necessary - a minor hassle, as you can see, but not terrible.\n\n## Code\n\nThe description in this section is very similar to the one in the [Algorithms Tour readme](https://github.com/stitchfix/algorithms-tour/blob/master/README.md), but since this repo is a bare-bones version of the structure, it is somewhat simpler here. Apologies for being repetitive.\n\nThe figure below illustrates the overall structure. The two most important `\u003cdiv\u003e` elements are the `#sections` and `#vis` elements, which play the roles described in Jim Vallandingham's description: the `#sections` div contains a set of `\u003csection class=\"step\"\u003e` elements that form the text column on the left, and whose positions determine which javascript functions are called when to manipulate the visual elements in the `#vis` div. These two `\u003cdiv\u003e`s are wrapped in a `#graphic \u003cdiv\u003e`, in keeping with Vallandingham's structure.\n\n\n![structure-illustration-1](/doc/readme-illustration-1.png?raw=true)\n\nIf you take a quick gander at the `index.html` file, you will see a lot of svg syntax. The drawing elements within the `\u003csvg\u003e` constitute the landscape, sun, math and text. These svg elements were drawn in Adobe Illustrator (though any such graphical program could be used so long as it supports svg saving or export) and then simply pasted into the `index.html` file: this certainly bloats the file and is ugly to see in an html file, but it does make for a handy iterative workflow. \n\nThe first hierarchical level within the `\u003csvg\u003e` is composed entirely of `\u003cg\u003e` elements, each with an id that corresponds to the layer name in Illustrator and which gets referenced by the javascript functions that control the animation (e.g. by turning their `display` property on or off for different parts of the animation).\n\n\n![structure-illustration-1](/doc/readme-illustration-2.png?raw=true)\n\nFor each `\u003csection class=\"step\"\u003e` element in `#sections` (contained in `index.html`), there are two corresponding functions in `conductor.js`: an \"activate\" function, which is called when that section is scrolled into prominence (i.e. when the section above it reaches the top of the window); and a \"progress\" function, which is called for any scroll action within that section, and which uses the relative position within the section as a function parameter named `progress`. \n\n## Enjoy!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstitchfix%2Fhello-scrollytelling","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstitchfix%2Fhello-scrollytelling","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstitchfix%2Fhello-scrollytelling/lists"}