search

EmoryDHLab / 2021-data-by-design

Alpha version of Data by Design, an interactive book on the history of data visualization
3 stars 1 forks source link

Show text at start of Scrollytell visualizations #93

Closed jayvarner closed 2 years ago

jayvarner commented 2 years ago

This might impact other Scrollytell visualizations that I missed. Let me know and I'll amend the PR. This fixes #80 and likely affects #77 and #69.

netlify[bot] commented 2 years ago

Deploy Preview for databydesign ready!

Name Link
Latest commit 906d674a0fa41df1fb75c3caaa156990b048dd9b
Latest deploy log https://app.netlify.com/sites/databydesign/deploys/6336f0c957dd9e000936a7b6
Deploy Preview https://deploy-preview-93--databydesign.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

NicholasLYang commented 2 years ago

Seems like the padding changed on the scrollytell.

Before:

Screen Shot 2022-09-19 at 2 08 39 PM

After:

Screen Shot 2022-09-19 at 2 08 35 PM
jayvarner commented 2 years ago

I guess it sort of depends on how tall your window is. It is higher in the initial state than it was before. I did that to make room for the legend that is added between the 2nd and 3rd group. The div for the legend is just added, so there is not a great way to animate/ease the transition. Here is where I added a placeholder for now.

All that said, there is wonkiness on short windows. I'll take another look.

jayvarner commented 2 years ago

My last commit adds ensures there is some top spacing on short windows. The addition of the legend still causes some shiftiness on windows < 1000px. There is another task on #58 to "Add Ease in Animations." I can address it when I work on that.