This is week 2 of writing up our internal weeknotes into something vaguely public. In classic fashion I've managed to delay actually writing these up until the middle of the next week. These are the weeknotes for June 17th - 23rd.
The week started with Niall and Ivaylo on-site setting up the Singapore event, final testing, run throughs and the standard last minute adjustments. The actual event went smoothly, so things got back to normal development and further projects quickly.
For simple animations on the kiosk applications we often make use of Animate.css. It's a nice, standalone library that setups some ready to use animations in the css and works well for adding minor interaction animations to a project.
To add a fade in + up transition on an element, with Animate.css in the project, just adding a class of animated fadeInUp is all that's needed.
In testing, Niall ran into the problem that animations weren't working on his local install. After some testing it turned out he had the "Reduce Motion" setting enabled on his local OS setting. (Under Preferences > Accessibility > Display)
At the browser level, this get's communicated down as a media query called prefers-reduced-motion, and in the animate.css, it's configured to override any animation duration to 1ms.
Tailwind comes out the box with a well defined set of colours. For the Singapore event we needed to adjust some of the blue and yellows to match the client's branding guidelines.