GSAP in SvelteKit

Easing

GSAP provides a wide range of easing functions that you can use to create different effects. Here's an example of how you can use the ease property to apply an easing function to your animation:

gsap.from('.box', { duration: 1, x: 100, opacity: 0, ease: 'bounce' });

You can find a list of all the available easing functions in the GSAP documentation.

Delay property

You can also add a delay to your animation using the delay property. Here's an example of how you can add a delay of 0.5 seconds to your animation:

gsap.from('.box', { duration: 1, x: 100, opacity: 0, delay: 0.5 });

Stagger property

The stagger property allows you to stagger the start time of each element in a group of elements. That means you can animate multiple elements one after the other with a delay between each element. Here's an example of how you can use the stagger property:

gsap.from('.box', { duration: 1, x: 100, opacity: 0, stagger: 0.5 });

Aside from gsap.from(), there are other methods like gsap.to(), gsap.fromTo(), gsap.set(), and more that you can use to create different types of animations.

These are:

• gsap.to(): Animates an element from its current state to a new state.

• gsap.fromTo(): Animates an element from one state to another.

• gsap.set(): Sets the initial state of an element without animating it.

Timeline

GSAP also provides a Timeline class that allows you to create complex sequences of animations. Here's an example of how you can create a timeline:

const timeline = gsap.timeline();
timeline.from('.box', { duration: 1, x: 100, opacity: 0 })
        .to('.box', { duration: 1, y: 100, opacity: 1 });

As you can see, you can chain multiple animations together to create a sequence of effects.

Relative delay vs absolute delay

By default, GSAP uses relative delays, which means that each animation in a timeline starts after the previous one has finished. However, you can also use absolute delays to specify an exact start time for each animation. Here's an example of how you can use absolute delays:

const timeline = gsap.timeline();
timeline.from('.box', { duration: 1, x: 100, opacity: 0 }, 0)
        .to('.box', { duration: 1, y: 100, opacity: 1 }, 1);

In this example, the second animation starts 1 second after the timeline has started, regardless of the duration of the first animation.

Setting defaults

You can set default values for your animations using the gsap.defaults() method. Here's an example of how you can set default values for your animations:

gsap.defaults({ duration: 1, ease: 'power2.inOut' });

These default values will be applied to all subsequent animations unless overridden.

You can also set defaults in your timeline only:

const timeline = gsap.timeline({ defaults: { duration: 1, ease: 'power2.inOut' } });

Reverse

You can reverse an animation using the reverse() method. Here's an example of how you can reverse an animation:

const animation = gsap.to('.box', { duration: 1, x: 100 });
animation.reverse();

You can also reverse a timeline:

const timeline = gsap.timeline();
timeline.to('.box', { duration: 1, x: 100 })
        .to('.box', { duration: 1, y: 100 });
timeline.reverse();

GSAP in SvelteKit

To use GSAP in a SvelteKit project, you can import GSAP in your script tag and use it as you would in a regular JavaScript file. Here's an example of how you can use GSAP in a SvelteKit component:

<script>
  import { gsap } from 'gsap';

  $effect(() => {
    gsap.from('.box', { duration: 1, x: 100, opacity: 0 });
  });
</script>

<div class="box">Hello, GSAP!</div>