CSS-Only Scroll-Triggered Animation
This is a demonstration of scroll-triggered animation that uses only CSS for the animation - no JavaScript required.
This initial implementation is the original CodePen demo code pasted into a PluginHTML in a wiki page (The author's YouTube video is here). The original code contains a lot of CSS rules that overlap Bootstrap's rules, so some CSS was removed, except for what is needed for the animation because Tiki already has the rules for layout and styling, etc. A lot of the original CSS has been removed but it can be cleaned up some more. Another step could be to replace the HTML element syntax with wiki plugins.
More information
I'm not sure yet if this content, above the animated area, is just demo filler or if it serves the purpose of keeping more cards below the bottom of the viewport so that their animated appearance is more impressive.
-
Tidewater Ferries
Rebuilt a seasonal booking flow that was losing people at the passenger details step.
-
Meridian
A token layer and component set shared across four product teams and two brands.
-
Harbour Table
A restaurant site where the menu is editable by staff and still loads in under a second.
-
Cadence
Dashboard work for a scheduling tool, focused on dense tables that stay readable on a phone.
-
Field Notes
A tiny publishing tool for people who want a blog and not a build pipeline.
-
Lantern Audit
An accessibility review and remediation plan for a provincial government service.
-
Slate and Salt
Storefront templates for a small ceramics studio, built to survive a holiday traffic spike.
-
Nova Docs
Documentation site with versioned API references and a search that people actually use.
-
Rivet
A set of unstyled components I keep reaching for, finally written down properly.