How I Integrate Svelte With Gsap 3

In my opinion Gsap is one of the best animation libraries out there,
roughly 10 million sites use GSAP,so yeah it is a pretty big deal.
You can learn more about it here.

In this brief and hopefully informative post, I want to show you guys how
I use Gsap with one of my favorite frameworks Svelte.

I assume you already know how to setup a basic svelte project,So I will skip that part and let's just quickly install Gsap

npm install gsap 

now under the src folder,lets create a file called animate.js
and fill it with this

import { gsap } from "gsap";

export function animate(node, { type, ...args }) {
  let method = gsap[type];
  return method(node, args);
}

Now how do we use this little function we just wrote,
for one we can use it with svelte actions.
Actions are element-level lifecycle functions. They're useful for things like interfacing with third-party libraries,actions are very similar to transitions,to use the function we made as an action we make use of the use keyword on the element we want to animate.

App.svelte

<script>
  import { animate } from "./animate.js";
  let desc = false;
</script>

<style>
  main {
    text-align: center;
    padding: 1em;
    max-width: 240px;
    margin: 0 auto;
  }
</style>

<main
  use:animate={{ type: 'from', duration: 1, opacity: 0, onComplete: () => (desc = true) }}>
  Gsap baby
</main>

That will just fade in "Gsap baby" when the page loads and fire the callback once thats done.
we can also use this to transition elements that are entering or leaving the dom.

<script>
  import { animate } from "./animate.js";
  let desc = false;
</script>

<style>
  main {
    text-align: center;
    padding: 1em;
    max-width: 240px;
    margin: 0 auto;
  }

  @media (min-width: 640px) {
    main {
      max-width: none;
    }
  }
</style>

<main
  use:animate={{ type: 'from', duration: 1, opacity: 0, onComplete: () => (desc = true) }}>
  <h1>Helllo broooooo</h1>
</main>

{#if desc}
  <p
    transition:animate={{ type: 'from', duration: 1, opacity: 0 }}
    class="desc">
   Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae natus libero quisquam, aliquam quod vel quia necessitatibus? Cupiditate, excepturi nisi. Nam tempora ex numquam voluptatum minima similique sequi, fugit placeat!
  </p>
{/if}

Hope that was helpful,Peaceeeeeee.

Comments

[Jeff Caldwell]

I decided to try using this method with Svelte's in: and out: directives and it (mostly) works! Unfortunately it looks like Svelte fails to remove the transitioning element from the DOM at the end of the out: transition. Still, it's nice to know.

Thanks for sharing your technique for integrating GSAP with Svelte!

[arjarn]

I'm using your method with Sapper (on standard template) and having trouble.
I have 3 differents pages (with navbar) : when i enter in page with GSAP animation all is good. But when I'm swapping on another page : content display by GSAP is always on screen and the new content appear under....

Have you another trick for using GSAP with Sapper ?

[Khutso siema]

Set the position of the pages to absolute or use location api to do a conditional render

[Gabriel Atwell]

I have a small question... Would this method work with Sveltekit as well?

[Kevin Canlas]

Is this the only way to implement GSAP into a Svelte app? In this case, you'd have to use Svelte's Actions. Is there a way around this?