The van kept jumping. Not driving — jumping. One frame it was in Oklahoma. The next it was in South Carolina, as if the eighteen hundred miles between them simply didn't exist. The journey — the whole point — was invisible.
The problem turned out to be a single line fighting another single line. We had set an inline style — van.style.transition = 'opacity 0.5s ease' — to fade the van in on arrival. Inline styles have higher CSS specificity than class-based styles. So when we later added the .driving class with its transition: left 3.2s, the inline style was winning. The left property had no transition at all. Hence the hyperspace.
The fix was one line: van.style.transition = '' — clear the inline style before adding the driving class. Let the CSS take over. Then a double requestAnimationFrame to ensure the browser registers the transition before the position changes. After that, the van drove.
What you're about to watch is a 2009 Chevrolet Uplander minivan carrying Herman and Kathryn McFillen from Oklahoma east through South Carolina and on to Tampa, Florida. It is a true story. The van is 56 pixels tall. The journey took eight months. We tried to honor both.
van.style.transition inline overrides any CSS class transition. The van's left property had no transition — so it jumped instantly between positions instead of driving.van.style.transition = '' — clears the inline style. Then add the .driving class. The CSS transition: left 3.2s takes over cleanly.requestAnimationFrame calls ensure the browser has registered the transition before the position changes. One frame isn't always enough.