Every church we work with has a story. A founding pastor who preached out of a rented storefront. A building fund that took nine years and one very stubborn treasurer. A season where the doors almost closed, and the season after that when they didn't. When we ask what's on the church website about any of it, the answer is usually a paragraph on the About page and a black-and-white photo from 1974.
There is a better way, and this year it stopped needing a JavaScript library to pull off.
The feature, in one paragraph
CSS scroll-driven animations let the scroll bar act as the playhead for an animation. As a visitor scrolls down your page, a photo can fade in, a milestone can slide into place, a founding verse can grow from small to large. No IntersectionObserver, no scroll event listeners, no bundle of animation JavaScript. Just a couple of lines of CSS: animation-timeline: view() and a @keyframes block.
As of mid-2026, this is baseline. Chrome and Edge have shipped it since version 115, Firefox since 132, and Safari since 18. Coverage sits comfortably above 84% of global visitors, with graceful degradation for anyone on an older browser — they simply see the page without the animation, which is exactly what a church website should do.
Why this matters for churches specifically
A church history page done in JavaScript almost always makes three mistakes. It ships a heavy animation library to a congregation that mostly visits from a phone on the church wifi. It fights with screen readers because the elements start invisible and never quite announce themselves. And it feels like a corporate splash page — glossy in a way that reads as marketing, not testimony.
Scroll-driven CSS solves all three. The bundle is empty. The content is in the DOM from the first paint, so search engines and screen readers see the story whether the animation runs or not. And because you are working with pure motion instead of parallax gimmicks, you can keep the tone honest: a photo that comes into focus as it enters the viewport is the visual equivalent of a slow page turn, not a Times Square billboard.
A pattern we're using this fall
Here is the pattern we've landed on for church timeline pages. It is roughly forty lines of CSS.
Each milestone is a section with a year, a headline, and a paragraph of story. As the section scrolls into view, the year fades up first, then the headline, then the paragraph. When the section leaves, everything stays put — no exit animation, because a testimony that scrolls back out and disappears feels wrong.
.milestone > * {
animation: rise 1 linear both;
animation-timeline: view();
animation-range: entry 10% cover 40%;
}
@keyframes rise {
from { opacity: 0; transform: translateY(1.5rem); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.milestone > * { animation: none; }
}
Four things worth pointing out. The animation-range line tells the browser to run the animation between the moment the element first enters the viewport and the moment it is 40% of the way through — not the whole scroll. The both keyword keeps the final state after the range ends, so the story stays visible. The prefers-reduced-motion block turns the whole thing off for members and visitors who have asked their device for less motion; this matters more in a church audience than almost any other, and it costs three lines.
Where to actually use it
Not everywhere. Motion is a currency, and church websites overspend it constantly. We are recommending scroll-driven animations for exactly three kinds of pages this year:
The history or timeline page. A vertical timeline of the church's story, with photos fading in and dates settling into place. This is the highest-return use.
The building fund or capital campaign page. A milestone bar that fills as the reader scrolls, matched to real dollars raised. Honest, not manipulative — the visual is one-to-one with the number.
The staff or elders page. As you scroll, each face rises gently into view. Nothing more than that. It reads as introduction, not spectacle.
Everywhere else — the sermons page, the donation page, the plan-your-visit page — the correct amount of animation is zero. A visitor deciding whether to come Sunday is not there to be delighted; they are there to find a service time and an address.
The theological footnote
We think about motion on a church website the same way we think about music in a service. It can serve the story or overwhelm it. When we use it well, the visitor never notices the technique — they notice the story. A timeline that quietly unfolds as you read down the page invites you into the church's history the way a good sermon invites you into a passage: at the pace of attention, not the pace of a marketing team.
If your history page is currently one paragraph and a scan of a bulletin from 1974, we would love to help you tell the longer version well. Tell us your church's story and we'll show you what forty lines of CSS can do with it.