Animated parents

Waiting for the parent

A chart can be inside an element that animates in: a block that slides in, a panel that opens, a tab that fades in. If the chart built at the same time, it would be half done before you could see it.

So if an element around the chart has a CSS animation or a CSS transition, Tablechart waits until it is halfway, and then builds the chart. This works for the parent of the chart and for any element further up. You do not need to set anything.

Example

This block slides in from the right when it scrolls into view. The chart starts when the block is halfway.

.slide-in-area {
	overflow-x: clip;
}
.slide-in {
	opacity: 0;
	transform: translateX(6em);
}
.slide-in.is-visible {
	animation: slide-in 1.2s ease forwards;
}
@keyframes slide-in {
	to {
		opacity: 1;
		transform: none;
	}
}
@media print {
	.slide-in {
		opacity: 1;
		transform: none;
	}
}

A small script adds is-visible when the block scrolls into view:

const observer = new IntersectionObserver((entries) => {
	for (const entry of entries) {
		if (entry.isIntersecting) entry.target.classList.add("is-visible");
	}
}, { threshold: 0.5 });

document.querySelectorAll(".slide-in").forEach((block) => observer.observe(block));

<figure data-chart="column">
	<figcaption><b>Apples picked</b></figcaption>
	<table>
		<tbody>
			<tr><th>Spring</th><td>58</td></tr>
			<tr><th>Summer</th><td>72</td></tr>
			<tr><th>Autumn</th><td>70</td></tr>
			<tr><th>Winter</th><td>31</td></tr>
		</tbody>
	</table>
</figure>

Earlier or later

By default, the chart builds when the element around it is halfway. Add data-chart-entrance to the figure to choose another moment, from 0 to 1. With 0, the chart builds as soon as the element starts to move. With 1, it builds when the element is in.

<figure data-chart="column" data-chart-entrance="0.25">

To set it for every chart, use the entrance option.

init({ entrance: 0.25 });

A parent that is still hidden

A parent can be invisible, with an opacity of 0, until its own script starts the animation. If the chart comes into view before that, Tablechart waits until the parent starts to animate in, or becomes visible.

In print

When the page is printed, Tablechart shows every chart whole. But a parent that has not animated in yet is still invisible, so its chart is not printed. Make the parent visible in print, as the example above does:

@media print {
	.slide-in {
		opacity: 1;
		transform: none;
	}
}

Animations that follow the scroll

A CSS animation with animation-timeline follows the scroll position, and has no duration in seconds. Tablechart does not wait for it.

Reduced motion

If the visitor has asked for reduced motion in their system settings, Tablechart does not wait, and charts are shown without animation.