Context
Think Upon is Mark Steiner's personal site and blog: a platform for his ideas, writing, and media projects. The design called for a higher-than-usual level of animation, with Lottie files playing a central role in the user experience rather than serving as decorative accents. The challenge was finding a scalable, editor-friendly way to integrate those animations into WordPress without making the process brittle or hard to maintain.
Role
Process
- 01
A custom post type for Lottie management
Rather than embedding Lottie files directly into blocks or hardcoding them, a custom post type was created for each animation. Each entry holds the Lottie JSON file and its associated assets via an ACF Gallery field. When building pages with custom blocks, editors can select which Lottie animation to use from this library. This keeps animations organized and reusable across the site.
- 02
Performance and asset management
Lottie files can carry significant overhead, particularly when they embed images. A custom bash script handles pre-processing before files are added to WordPress. It rewrites asset links within the JSON and renames those assets to avoid naming conflicts between different Lottie files. From there, stripping down files where possible and ensuring embedded images were properly compressed were deliberate parts of the integration process. This preserves animation quality while managing performance costs.
- 03
Scroll-triggered animations
A custom library was built to trigger animations during scroll using the Intersection Observer API, giving fine control over when animations fire without the overhead of a full scroll animation framework.
- 04
GreenSock for specific animation needs
GSAP handled a scrolling marquee animation and more complex effects, including the MotionPath plugin for path-based animation and the SplitText Plugin for animated headline treatments.
Outcome
A polished, animation-rich site that uses motion as a storytelling tool rather than decoration. The Lottie management system makes animations maintainable and reusable.