Basic Animations

Basic animation presets for common fade, move, and scale effects. Each preset can be customized by passing additional GSAP variables or modifying values in the preset itself.

Simply add the preset to your presets.ts file and use it across your project.

fadeIn

Fades in an element from transparent to visible.

Preset

fadeIn: (vars: gsap.TweenVars = {}): gsap.TweenVars => ({
    autoAlpha: 0,
    duration: 1,
    ease: "power2.inOut",
    ...vars,
})

Usage Example

import { useRef } from "react";
import { useGSAP, gsap } from "@/animations/gsapConfig";
import { motion } from "@/animations/basic-presets";

export default function Component() {
    const ref = useRef<HTMLDivElement>(null);

    useGSAP(() => {
        const tl = gsap.timeline({ defaults: { ease: "power2.inOut" } });
        tl.from(".element", motion.fadeIn());
    }, { scope: ref });

    return (
        <div ref={ref}>
            <div className="element">Your content here</div>
        </div>
    );
}

Fade In

fadeInMoveY

Fades in an element while moving it vertically (from bottom to top).

Preset

fadeInMoveY: (vars: gsap.TweenVars = {}): gsap.TweenVars => ({
    y: 10,
    autoAlpha: 0,
    duration: 0.7,
    ease: "power2.inOut",
    ...vars,
})

Usage Example

import { useRef } from "react";
import { useGSAP, gsap } from "@/animations/gsapConfig";
import { motion } from "@/animations/basic-presets";

export default function Component() {
    const ref = useRef<HTMLDivElement>(null);

    useGSAP(() => {
        const tl = gsap.timeline({ defaults: { ease: "power2.inOut" } });
        tl.from(".element", motion.fadeInMoveY());
    }, { scope: ref });

    return (
        <div ref={ref}>
            <div className="element">Your content here</div>
        </div>
    );
}

Fade In Move Y

fadeInMoveX

Fades in an element while moving it horizontally (from right to left).

Preset

fadeInMoveX: (vars: gsap.TweenVars = {}): gsap.TweenVars => ({
    x: 30,
    autoAlpha: 0,
    duration: 0.8,
    ease: "power2.out",
    ...vars,
})

Usage Example

import { useRef } from "react";
import { useGSAP, gsap } from "@/animations/gsapConfig";
import { motion } from "@/animations/basic-presets";

export default function Component() {
    const ref = useRef<HTMLDivElement>(null);

    useGSAP(() => {
        const tl = gsap.timeline({ defaults: { ease: "power2.out" } });
        tl.from(".element", motion.fadeInMoveX());
    }, { scope: ref });

    return (
        <div ref={ref}>
            <div className="element">Your content here</div>
        </div>
    );
}

Fade In Move X

fadeOut

Fades out an element from visible to transparent.

Preset

fadeOut: (vars: gsap.TweenVars = {}): gsap.TweenVars => ({
    autoAlpha: 0,
    duration: 0.35,
    ease: "power2.inOut",
    ...vars,
})

Usage Example

import { useRef } from "react";
import { useGSAP, gsap } from "@/animations/gsapConfig";
import { motion } from "@/animations/basic-presets";

export default function Component() {
    const ref = useRef<HTMLDivElement>(null);

    useGSAP(() => {
        const tl = gsap.timeline({ defaults: { ease: "power2.inOut" } });
        tl.to(".element", motion.fadeOut());
    }, { scope: ref });

    return (
        <div ref={ref}>
            <div className="element">Your content here</div>
        </div>
    );
}

Fade Out

fadeInScale

Fades in an element while scaling it from 0 to its original size.

Preset

fadeInScale: (vars: gsap.TweenVars = {}): gsap.TweenVars => ({
    scale: 0,
    autoAlpha: 0,
    duration: 1,
    ease: "power3.out",
    ...vars,
})

Usage Example

import { useRef } from "react";
import { useGSAP, gsap } from "@/animations/gsapConfig";
import { motion } from "@/animations/basic-presets";

export default function Component() {
    const ref = useRef<HTMLDivElement>(null);

    useGSAP(() => {
        const tl = gsap.timeline({ defaults: { ease: "power2.out" } });
        tl.from(".element", motion.fadeInScale());
    }, { scope: ref });

    return (
        <div ref={ref}>
            <div className="element">Your content here</div>
        </div>
    );
}

Fade In Scale

Stagger Example

Use the stagger property to animate multiple elements sequentially with a delay between each animation.

Usage Example

import { useRef } from "react";
import { useGSAP, gsap } from "@/animations/gsapConfig";
import { motion } from "@/animations/basic-presets";

export default function Component() {
    const ref = useRef<HTMLDivElement>(null);

    useGSAP(() => {
        const tl = gsap.timeline({ defaults: { ease: "power2.inOut" } });
        tl.from(".element", motion.fadeIn({ stagger: 0.2 }));
    }, { scope: ref });

    return (
        <div ref={ref}>
            {Array.from({ length: 5 }).map((_, index) => (
                <div key={index} className="element">
                    Item {index + 1}
                </div>
            ))}
        </div>
    );
}

The stagger: 0.2 property creates a 0.2 second delay between each element's animation, creating a cascading effect.

1

2

3

4

5

Complete Presets File

Here's a complete example of all basic animation presets:

export const motion = {
  fadeIn: (vars: gsap.TweenVars = {}): gsap.TweenVars => ({
    autoAlpha: 0,
    duration: 1,
    ease: "power2.inOut",
    ...vars,
  }),

  fadeInMoveY: (vars: gsap.TweenVars = {}): gsap.TweenVars => ({
    y: 10,
    autoAlpha: 0,
    duration: 1,
    ease: "power2.inOut",
    ...vars,
  }),

  fadeInMoveX: (vars: gsap.TweenVars = {}): gsap.TweenVars => ({
    x: 30,
    autoAlpha: 0,
    duration: 1,
    ease: "power2.out",
    ...vars,
  }),

  fadeOut: (vars: gsap.TweenVars = {}): gsap.TweenVars => ({
    autoAlpha: 0,
    duration: 1,
    ease: "power2.inOut",
    ...vars,
  }),

  fadeInScale: (vars: gsap.TweenVars = {}): gsap.TweenVars => ({
    scale: 0,
    autoAlpha: 0,
    duration: 1,
    ease: "power3.out",
    ...vars,
  }),
};

Customization

All presets accept additional GSAP variables that will override or extend the default values:

// Override duration
tl.from(".element", motion.fadeIn({ duration: 2 }));

// Add delay
tl.from(".element", motion.fadeIn({ delay: 0.5 }));

// Combine with stagger
tl.from(".element", motion.fadeIn({ stagger: 0.1, duration: 0.8 }));