Loading...
 
Skip to main content

History: CSS-Only Scroll-Triggered Animation

View published page Collapse Into Edit Sessions

Preview of version: 1

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 [https://www.youtube.com/watch?v=onraoQExbHw&t=8shere]). 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.

  • Client work

    Tidewater Ferries

    Rebuilt a seasonal booking flow that was losing people at the passenger details step.

    • Forms
    • Astro

  • Meridian

    A token layer and component set shared across four product teams and two brands.

    • Tokens
    • Docs

  • Harbour Table

    A restaurant site where the menu is editable by staff and still loads in under a second.

    • CMS
    • Performance

  • Cadence

    Dashboard work for a scheduling tool, focused on dense tables that stay readable on a phone.

    • Data tables
    • Container queries

  • Field Notes

    A tiny publishing tool for people who want a blog and not a build pipeline.

    • Node
    • Markdown

  • Lantern Audit

    An accessibility review and remediation plan for a provincial government service.

    • WCAG
    • Testing

  • Slate and Salt

    Storefront templates for a small ceramics studio, built to survive a holiday traffic spike.

    • Shopify
    • Liquid

  • Nova Docs

    Documentation site with versioned API references and a search that people actually use.

    • Search
    • Information architecture

  • Rivet

    A set of unstyled components I keep reaching for, finally written down properly.

    • Web components
    • ARIA

History

Information Version
Sun 30 of Aug, 2026 09:24 UTC Gary Cunningham-Lee Fixed video link (wiki syntax doesn't work in HTML ;-) ). 3
Sun 30 of Aug, 2026 09:15 UTC Gary Cunningham-Lee Fixed video link. 2
Sun 30 of Aug, 2026 08:15 UTC Gary Cunningham-Lee Page created and content copied from localhost. 1