Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
zofia

Svelte Page Transitions with GSAP

Recommended Posts

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!

Link to comment
Share on other sites

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

What exactly is broken? Thanks!

  • Like 1
Link to comment
Share on other sites

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

 

  • Like 3
Link to comment
Share on other sites

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!
 

Link to comment
Share on other sites

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 :) 

Link to comment
Share on other sites

@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.

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

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. 💚🧦🧡

  • Like 2
  • Thanks 2
Link to comment
Share on other sites

@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. :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×