This week I put up a bunch of and worked on svgs for the scroll based animated infographics. I had planned on using Snap.js but found it not as useful as I had thought it would be and ended up switching to AOS library. I now have scroll based animations on my infographics and just need to add some more imagery.
I have put together and have complete functionality going on my get help page, with an interactive svg map that allows the user to click on individual states and see resources for them. A modal pops up on click and the state remains highlighted until the modal is closed. It was tricky coding for the special cases of the complex states functioning as a unit and handling modal closing on x button and clicking out of the window.
The positive affirmations page is all done, though I do want to add another version for mobile since I found out that the P5.js webgl smooshes down and doesn’t scale gracefully like say Create.js. I now have randomized quotes, no duplicates on the stage, that switch out a few at a time periodically and rotate slowly. I acknowledge that there is some friction to reading when the shapes are flipped, but I like the idea that this could keep an individual in the space longer to read the text. Also the texture painting does not paint the text in all the same direction on the blocks. I also added a large sphere of planes in around the block space that twinkle to make it feel like a starry night.
I also made some aesthetic changes, that make me like the ambiance of the site much better, like not having the header be fixed, making the background a soft gradient, removing the background on the footer, and adding a little svg as a divider above the footer.