Svelte and gsap?

[scd]

hi all, new to gsap and sveltekit. I have a reused component that shows the time.

When the time is displayed, I want it to animate in with lets say a fade.

On the main page I have multiple instances of this component ie

 

<Component time={"2:45PM"}/> 
<Component time={"5:00AM"} />

<Component time={"1:30AM"}/>

 

and the component looks basically like
 

<script>

    import { gsap } from 'gsap';

    import { onMount } from 'svelte';

    export let time;

 

    onMount(() => {

        gsap.registerPlugin(ScrollTrigger);

        const tl = gsap.timeline({

            scrollTrigger: {

            trigger: '.time',

            start: 'top left',

            end: 'bottom left',

            scrub: true

        }

        });

        tl.fromTo('.time', { opacity: 0 }, { opacity: 1, duration: 1 });

    });

</script>

 

<div>

<div class="time">{time}</div>

</div>

 

But that doesn't work. What am I missing?

Here's an interactive demo https://codesandbox.io/p/devbox/svelte-gsap-test-php853?file=%2Fsrc%2Froutes%2FSlide.svelte
I want the times displayed to animate in

[Rodrigo]

Hi @scd and welcome to the GSAP Forums!

 

Mostly this is about the start and end positions. By default ScrollTrigger works in a vertical fashion but you are mixing vertical and horizontal values, so these start and end points are not correct:

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: '.time',
    start: 'top left',
    end: 'bottom left',
    scrub: true
  }
});

Basically you're telling ScrollTrigger that you want the animation to start when the top of the trigger hits the left of the viewport and to end when the bottom of the trigger hits the left.

 

On top of that your demo doesn't have GSAP installed, so you're getting an error there. We have this starter demo that uses ScrollTrigger in SvelteKit:

https://stackblitz.com/edit/sveltejs-kit-template-default-unljf6

 

Hopefully this helps.

Happy Tweening!

[scd]

Thanks Rodrigo! I set it up properly according to your feedback (I think, see my codesandbox) but I'm running into this problem now. I see you responded with a solution at the bottom, but I don't think I can do that because I'm working for a company that doesn't allow external links in the code, everything is a local registry. Any ideas?

 

[Rodrigo]

1 hour ago, scd said:

I'm working for a company that doesn't allow external links in the code, everything is a local registry.

Hi, I don't really understand what you mean with this TBH

 

The solution I posted predicates in installing the GSAP Plugins from the dist folder which is available when you install GSAP with NPM running this:

npm install -s gsap

Then in your files/components you should import like this:

import gsap from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

if (typeof window !== "undefined") {
  gsap.registerPlugin(ScrollTrigger);
}

By the way your codesandbox demo still throws an error 🤷‍♂️

 

Happy Tweening!