Lines split incorrectly on Astro with View Transitions API

[suhaylmv]

I have this website https://www.minov.studio/en/, which uses split type to split words and lines, and then animates each one of them using an animation library. It works perfectly when loading the page for the first time, the problem is after navigating to any other page and then going back, the lines are split incorrectly. Although sometimes it can take more than one try to achieve this.

First load: Second load:

However, when using a browser not based on chromium like Firefox, the fallback behaviour is normal page load and the lines are always split correctly. So I'm sure the problem causing this must be something related to the client-side navigation behaviour of Astro.

Code:

<script> 
import SplitType from "split-type"

const animationsInit = () => {
    const heading = new SplitType(".fade-h", { types: "words" })
    const paragraph = new SplitType(".fade-p", { types: "lines" })

    // Setting the opacity of the elements to 0, to be able to animate them using an animation library
    line.forEach(function (element) {
      element.style.opacity = 0
    })
    const sectionElements = [...heading.words, ...paragraph.lines]
    sectionElements.forEach(function (element) {
      element.style.opacity = 0
    })

    // Code which animates the elements (skipped)
}

// Executing the function on page load
animationsInit();

// Executes animationInit() when navigation between pages
document.addEventListener("astro:after-swap", animationsInit)
</script>

Here's the link for anyone interested in knowing more about View Transitions: https://docs.astro.build/en/guides/view-transitions/#overview

[lukePeavey]

Hey, sorry for the slow response. I tried to take a look at your site, but it looks like you have removed the split text animation (?). If you have a link to a version of the site where this issue can be seen, I'd be happy to check it out.

Unfortunately I'm not familiar with Astro, so I'm not sure if I will be much help in this case. I'll leave this issue open in case anyone else has any thoughts.

[suhaylmv]

Yeah, I've already removed it. Also I've made some decisions and I'm not interested in using SplitType for my project in the near future. If anyone else faces the same issue and wants to find a fix, I can help with showing the old version of my site