I'm using ViewTransitions to fade between pages and use motion ones inView animation on headings to fade them in. They only work on the first page load.
This is what i tried:
<script>
import { animate, inView } from 'motion';
const doFadeIn = (target: Element) =>
animate(
target,
{
opacity: [0, 1],
transform: ['translateX(-10px)', 'translateX(10px)'],
},
{ duration: 0.5, delay: 0.1 }
);
inView('h2', (el) => {
doFadeIn(el.target);
});
</script>
and the ViewTransition is from Astro
<html transition:animate="fade">
<head>
<title> My Page </title>
<ViewTransitions />
</head>
</html>
On The first page load it works as expected but after navigating, the inView doesn't trigger anymore.