preserve scroll using inertia.render

[parpar78]

Hi all,

I've made a javascript transition in Vue when a user goes to another page. Everything works, accept when the animation starts the old page scrolls to the top. Then the animation starts. Then the new page appears.

The problem is that I don't want the old page to scroll to the top when the animation starts. But scroll to the top after the animation is finished.

Is the best use case for this to add preserve-scroll to inertia-link and then scroll to top after the page is loaded? Or does anyone knows a better solution for this?

See my current code below

<template> <main> <transition appear name="fade" @beforeLeave="beforeLeave" > <slot></slot> </transition> <loader :display="loaderDisplay" :size="screenfillsize"></loader> </main> </template>

`<script>
import Loader from './Layout/Loader.vue';
import { Inertia } from '@inertiajs/inertia';
import { gsap } from "gsap";

export default {
    components:{
        'loader': Loader
    },

    data() {
        return {
            loadingAnimation: gsap.timeline({
                paused: true,
            }),
            screenfillsize: 0,
            loaderDisplay: "none"
        }
    },
    methods: {
        beforeLeave(){
            if (!window.matchMedia("(max-width: 991px)").matches) {
                var vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
                var vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
                this.screenfillsize = Math.max(vh,vw) * 1.5;
                
                this.loadingAnimation.from('#page-loader .circle',{borderWidth: 0, width: 0, height: 0})
                this.loadingAnimation.to('#page-loader .circle',{borderWidth: this.screenfillsize, duration: 0.75})
                this.loadingAnimation.to('#page-loader .circle',{width: this.screenfillsize, height: this.screenfillsize, borderWidth: this.screenfillsize, duration:0},0.75)
                this.loadingAnimation.to('#page-loader .circle',{borderWidth: 0, width: this.screenfillsize, height: this.screenfillsize, duration: 0.75},1)

                this.loaderDisplay = "flex"
                this.loadingAnimation.play(0)

                if(this.loadingAnimation.isActive){
                    setTimeout(() => {
                        this.loaderDisplay = "none";
                    }, 2000);
                }
            }
        }
    }
}

</script>`

<style lang="css" scoped> @media only screen and (min-width: 992px){ .fade-enter-active, .fade-leave-active { transition-duration: .75s; } } </style>