Repository navigation
Feature: Match scroll position of outgoing and incoming page聽#18
Description
Activity
Hi! I'm not sure I understand 100% what you're trying to achieve. You want the whole animation to finish, and only then scroll to the top?
It's probably easiest to understand if you're willing to share a link to your current solution.
@daun Please see this video:
https://github.com/user-attachments/assets/6361996d-42a9-48a0-a3b6-a8c831b4b88dYou can see that the page firstly scrolls to top and then transitions to the next page i clicked.
I need it to stay static, transition to the next page that is scrolled to top.Alright, thanks.
That should be doable already by disabling the scroll reset and doing it yourself manually.
Untested example code below, let us know if that works. You can probably remove the if {} checks if you're only ever running parallel animations.
swup.hooks.on('visit:start', (visit) => { if (visit.animation.parallel) { visit.scroll.reset = false } }) swup.hooks.on('visit:end', () => { if (visit.animation.parallel) { window.scrollTo(0, 0) } })
If the scroll needs to be smooth, you can use this function signature:
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
@daun thanks, visit.scroll.reset = false helped to stop scrolling to top on start.
The problem is that the page transitions to the next one and it will scroll to top after the transition to top.
I need it to by on top before the transition.I see. That's a CSS question. Mostly. I've done this for a similar project and it's not pretty, but doable. Nothing I can share here, unfortunately, as it wasn't done in swup.
The logic goes like this: You measure the current scroll position when the transition starts, and offset the next page by that amount so it visually lines up with the current viewport. Right when the transition finishes, you remove the offset while simultaneously resetting the window scroll position.
- changed the title
[-][Feature Request]: Reset scroll position only for next page[/-][+]Feature: Match scroll position of outgoing and incoming page[/+]on Jul 27, 2024
Describe the problem 馃
First of all, I appreciate the work done on Swup, it鈥檚 great!
I managed to make a beautiful transition for my website with the help of SwupParallelPlugin.
It鈥檚 basically an easy masked transition to the new page.
I want to be able to click on a link, for example, in the second half of a page, and the next page should be scrolled to the top. I viewed a lot of previous issues, tried various hooks, and tried SwupScrollPlugin, but nothing is working in this manner. The SwupScrollPlugin is closest to what I want to achieve, but it scrolls the actual page to the top and then transitions.
I appreciate all the help.
Describe the propsed solution 馃槑
So i want this:
Alternatives considered 馃
SwupScrollPlugin
How important is this feature to you? 馃Л
I cannot use swup without it
Checked all these? 馃摎