Animation doesn't conform to common sense

[xiyuvi]

Prerequisite: When the mouse scroll wheel slides the page down a certain height Operation: Click on the third article Effect: The entire page slides up first and then down And when the top of the page is 0 and you click on the article, the entire page only has one animation, which is quite beautiful, so I think the above may be a bug that does not meet the author's expectations If the above animation meets your expectations, please end this issue directly https://dai.ly/k1zYbTpEUzIUwxCcfYe

[saicaca]

It seems the video link isn't working. Could you please paste the video here or provide another link?

[xiyuvi]

It seems the video link isn't working. Could you please paste the video here or provide another link?

https://drive.google.com/file/d/14DjYW0RBNS99UBXCn_L0CU3I083yWiUT/view?usp=sharing

The video showcases the elegant transition effect when clicking on the first article, as well as the transition effect when clicking on the third article

[L4Ph]

@xiyuvi To me this seems like normal behavior, like a necessary animation to go and correct the position of the posts/[...slug] content.

I think this happens because the importance of background images changes between the homepage and blog content pages.

[saicaca]

This is the expected behavior. What actually happens when navigating between homepage and other pages is:

1. Swup starts the page transition. Simultaneously the banner height begins to change and the page content shifts accordingly (animation 1)
2. -> The page transition ends
3. -> Swup scrolls the page back to the top (animation 2)

That's why you see two animations. I agree that this doesn't look ideal, and I did try to make the page scroll to the top immediately when the link is clicked, but that resulted in weird jumps. I guess this might be because Swup starts another scroll after replacing the page content, while the first scroll hasn't finished yet. I haven't figured out a solution for it.

[xiyuvi]

@saicaca Thank you for your informative presentation on the theme of animation. I understand that the reason why animations are not aesthetically pleasing is due to the simultaneous execution of highly animated images and scroll animations. I tried to change the animation of height changes to asynchronous execution, and manually scroll the animation after the image height changes. Unfortunately, this results in another slightly more aesthetically pleasing effect, where the page slides down first and then up again. I have time to try the following solutions again to see if they are effective

1. Remove the animation time when the image height changes
2. Change the height of the image, such as subtracting 100px
3. Scrolls without animation increase by 100px, deceiving visitors' eyes to feel that the current position has not changed (I don't know if it will cause browser flickering)
4. Execute scrolls animation normally

//First, execute the height change of the image, and then execute the scroll animation after completion
function executeAnimations(visit:any){
	return new Promise((resolveAll) => {
   
	 const classAnimation = new Promise((resolve) => {
		const bodyElement = document.querySelector('body')
		if (pathsEqual(visit.to.url, url('/'))) {
			bodyElement!.classList.add('lg:is-home');
		} else {
			bodyElement!.classList.remove('lg:is-home');
		}
        setTimeout(resolve, 700); // 700ms is the animation time for the height change of the top image
    });
	classAnimation.then(() => {
		const scrollAnimation = new Promise((resolve2) => {
        if (document.documentElement.scrollTop === 0) {
 		 resolve2()
} else {
	if ('onscrollend' in window) {
			const scrollEndHandler = () => {
				window.removeEventListener('scrollend', scrollEndHandler);
				resolve2();
			};
			window.addEventListener('scrollend', scrollEndHandler);
		}
		else {
			let scrollEndTimer;
       		 const scrollEndHandler = () => {
            clearTimeout(scrollEndTimer);
            scrollEndTimer = setTimeout(() => {
            window.removeEventListener('scroll', scrollEndHandler);
            resolve2();
            }, 150); // 给予150ms的缓冲时间确保滚动真正结束
        	};
			window.addEventListener('scroll', scrollEndHandler);
  		}
        window.scroll({ 
            top: 0, 
            behavior: 'smooth'
        });
}
		
    });
		scrollAnimation.then(() => {
		resolveAll()
    });
	})
    });
    
};

......


window.swup.hooks.on('visit:start', async (visit: {to: {url: string}}) => {
		await executeAnimations(visit)
		
		......

[xiyuvi]

I think the height of the image is necessary, but animations that change the height of the image are unnecessary. As long as we can find a way to change the height without changing the scrolls, we should be able to solve the problem