FLIP with scrolling element

[PP-Tom]

This is an issue I'm having with SvelteKit with changing between pages and the page scrolling back to the top, however, I can't do a CodePen of SvelteKit, so I've done a REPL to try my best to demonstrate the issue. It isn't exact replication as I can't do routing, but this should demonstrate what happens when moving between routes.

 

Effectively I only care about how the menu indicator has moved on the x axis and not the y to prevent the behaviour of it moving up into place. I've tried `absolute: true` but this really isn't the answer. I've read through the documentation and I'm unsure of the solution here. 

 

Any advice would be greatly appreciated. 

[GreenSock]

I'm not quite sure what you're looking for, but my guess is...

// bad
document.body.scrollTo({ top: 0 });

// good
window.scrollTo(0, 0);

Basically you're not actually scrolling to the top immediately, so your Flip.getState() is recording the positioning based on the scrolled-down state. 

 

If you still need help, please describe exactly how to reproduce the problem (and what the problem is...what should we look for?) 

[PP-Tom]

Hey @GreenSock, thank you for your reply. 

This is exactly true, which is causing issues with SPA's when you don't want the scroll position considered. Since I can't show an SPA in Codepen or REPL, I've uploaded the project to Vercel so you can hopefully see more clearly the issue I'm having. 

 

https://henry-training.vercel.app/

 

If you scroll down then navigate to "About" you'll see the dot move up, I would like to lock it to only the "X" axis so it doesn't move up. 

 

[Rodrigo]

Hi,

 

We have some starter templates that use SvelteKit:

https://stackblitz.com/@GreenSockLearning/collections/gsap-sveltekit-starters

 

Feel free to fork one of them in order to create your minimal demo there.

 

Also is quite possible that your HTML is being re-render when you change routes so you might have to add a targets config to your Flip animation:

https://gsap.com/docs/v3/Plugins/Flip/#config-object

 

Targets

String | Element | Array | NodeList - by default, Flip will use the targets from the state object (first parameter), but you can specify a subset of those as either selector text (".class, #id"), an Element, an Array of Elements, or a NodeList. If any of the targets provided is NOT found in the state object, it will be passed to the onEnter and not included in the flip animation because there's no previous state from which to pull position/size data.

 

Also I noticed that the marker element has a position: absolute on it but no position values (top/left/right/bottom) so that could be the issue when you scroll. Unfortunately is really hard for us to debug a live/deployed site.

 

Happy Tweening!

[PP-Tom]

Hey @Rodrigo,

 

Here is the code on StackBlitz, if you scroll down the page then change to a different route you will see the marker fly up because it's calculating the x and y axis, but because of position fixed only x is necessary so I believe locking to only calculating the x would fix this. 

 

https://stackblitz.com/edit/sveltejs-kit-template-default-4hlskw?file=src%2Flib%2FHeader.svelte

 

Thanks,

Tom

[Rodrigo]

Hi Tom,

 

I'm sure that there are better ways to tackle this, but sine SvelteKit is not keeping the scroll position when you change routes, you might do that in the link click event:

<a class="relative block font-bold" {href} on:click={() => {
  window.scrollTo(0,0);
}}>
  <slot />
  {#if isActive}
  <div class="nav-marker absolute -bottom-1 left-0 right-0 flex w-full justify-center" data-flip-id="nav-marker">
    <div class="h-[5px] w-[5px] rounded-full bg-black" />
  </div>
  {/if}
</a>

Here is a fork of the demo:

https://stackblitz.com/edit/sveltejs-kit-template-default-gbsh3g?file=src%2Flib%2FHeader.svelte,src%2Flib%2FNavItem.svelte

 

Hopefully this helps.

Happy Tweening!