Svelte Page Transitions with GSAP

[zofia 17 Likes (Newbie)]

Hi guys!

In my project, I want to use Svelte with Page Transitions + GSAP animations. I implemented the code from this tutorial: https://dev.to/giorgosk/smooth-page-transitions-in-layout-svelte-with-sveltekit-or-sapper-4mm1

Everything worked fine until I added GSAP animations. Would you have any advice on how to make it work? Or maybe there’s a better way for page transitions? I am eager to learn 

 

Here is a demo (use the top navigation Home /  About) :

 

Without Page Transitions:

https://stackblitz.com/edit/sveltejs-gsap-220222-b-gcaiew

 

With Page Transitions:

https://stackblitz.com/edit/sveltejs-gsap-220222-b-mykraq

 

I would appreciate any help on this. Thanks!

[Cassie 5,658 Likes (Superhero)]

Hey Zofia - could you elaborate on 'Everything worked fine until I added GSAP animations.'

What exactly is broken? Thanks!

[akapowl 5,494 Likes (Superhero)]

Hi Zofia,

 

I don't think it not working anymore is related to GSAP or ScrollTrigger but rather to how Svelte works.

 

I'm logging out the element that you are targetting as the trigger here and except for the first load it will always target the one on the page you left and not the one on the page you are going to. 

 

I can only speak from my experience with barba.js where both 'pages' will be in the DOM at the same time for a certain duration so you somehow have to work around that when wanting to target things on the new page - this looks like it might a similar case.

 

So you might have to find out how to target only elements on the new page in Svelte when doing transitions.

 

https://stackblitz.com/edit/sveltejs-gsap-220222-b-dtnpbb

 

[zofia 17 Likes (Newbie)]

Hi @Cassie

If you're navigating between pages (Home — About), my GSAP animations are not working (the color elements should get smaller). The blocks only  animate the first time you visit the website or when you refresh it. If you compare my demos (one is with and the other is without page transitions), you should see it.

Thanks!
 

[zofia 17 Likes (Newbie)]

Thanks @akapowl

 

Yes, I suppose this is on Svelte's side, but I was hoping that someone had a similar problem and solved it. 

I did a little research, but couldn't find many examples of how to use Svelte + GSAP. I will try to find a solution. Any tips are always appreciated  

[b1mind 69 Likes (Contributor)]

@zofia I recently played around with this myself on stream.

 

Wanted to let you know you are not alone in this quest of Svelte/Kit+GSAP magic. Tried scrollTrigger with some luck today but not really working with the page transitions well. Especially when pinning it seems to get kinda wonky, I will continue playing and report back. For now, the below works for timelines/tweens.

 

Svelte Actions are awesome for this I feel.  This allows you to use the node in the Svelte lifecycle. I am not sure if it's the best way yet but could at least get you working in the right direction. 

 

<script>  
	import { animateFrom, animateTo } from '$lib/gsapActions.js'

  	export let urlProp
</script>

{#key urlProp}
  <div
    in:animateFrom
    out:animateTo
  >
    <slot />
  </div>
{/key

 

Dipscom has some great examples here that have proper timing, since Svelte works on ms not seconds. Basically what my gsapActions.js file has exported.

[b1mind 69 Likes (Contributor)]

So, the best method I have come up with so far seems to be based on the above. I had a hell of a time trying to get StackBlitz to work with Edge (still not loading web containers 😭) https://stackblitz.com/edit/sveltejs-kit-template-default-gnljoc?file=src/routes/__layout.svelte

 

Few caveats,

1) To handle the first load of the component I just change url = 'test'. This could be handled better.

2) Dev is glitchy on the first page transition after the first load, but when in build/preview seems to not happen. ( #1 also seems to help fix)

3) While this seems to handle the full lifeCycle of the component I'm not sure if it needs a proper destroy method for the timeline/trigger actions.

 

Hope this helps! I really have been trying to get back into implementing them together. 💚🧦🧡

[zofia 17 Likes (Newbie)]

@b1mind

 

Cool! 👍Thank you very much! I'll try your method and play with the code. I'll let you know if it works for me.