Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/hetari/creative-coding/llms.txt

Use this file to discover all available pages before exploring further.

useGsap is the single entry point for all GSAP animation work across the creative-coding workspace. It returns the gsap instance with ScrollTrigger already registered, a useGsapContext helper for scoped animations that auto-revert on teardown, and a lazyLoadPlugin function for loading the rest of the GSAP plugin catalogue on demand. A set of gsap.utils functions is also re-exported as named exports so you can import them directly from the composable file without referencing gsap.utils yourself.

​
Signature

export function useGsap(): {
  gsap: GSAP
  ScrollTrigger: typeof ScrollTrigger
  lazyLoadPlugin: <K extends PluginName>(name: K) => Promise<PluginExport<K>>
  useGsapContext: (
    scope: Ref<HTMLElement | null | undefined>,
    fn: (self: gsap.Context) => void,
  ) => gsap.Context | undefined
}

​
Return Value

​
gsap
GSAP
The GSAP instance with ScrollTrigger pre-registered. Use gsap.to(), gsap.from(), gsap.set(), gsap.timeline(), gsap.matchMedia(), gsap.quickTo(), and all other core GSAP methods directly on this object.
​
ScrollTrigger
typeof ScrollTrigger
The ScrollTrigger plugin class, already registered with the GSAP instance at module load time. Pass it directly to scrollTrigger: option objects inside tweens, or call ScrollTrigger.create(), ScrollTrigger.refresh(), etc.
​
lazyLoadPlugin
<K extends PluginName>(name: K) => Promise<PluginExport<K>>
Dynamically imports and registers a GSAP plugin the first time it is requested. Subsequent calls for the same plugin name are no-ops — the module-level registered set prevents double-registration. Returns the plugin class itself so you can use it immediately after await.
​
useGsapContext
(scope: Ref<HTMLElement | null | undefined>, fn: (self: gsap.Context) => void) => gsap.Context | undefined
Creates a gsap.context() bound to the element held by scope. All GSAP selector strings inside fn (e.g. gsap.from('.item', …)) are scoped to that element rather than the full document. The context is automatically reverted — killing all tweens, ScrollTriggers, and inline style resets — when the Vue scope is disposed, via tryOnScopeDispose.

​
Exported Utility Functions

The following functions are re-exported directly from gsap.utils as named exports. Import any of them straight from @/composables/useGsap without going through the gsap object: clamp · mapRange · normalize · snap · toArray · interpolate · pipe · wrap · wrapYoyo · distribute · random · shuffle · getUnit · unitize · splitColor · selector 
import { clamp, mapRange, normalize } from '@/composables/useGsap'

​
Lazy Plugin Names

The following GSAP plugins are available to lazyLoadPlugin. Each is code-split and only downloaded when you call lazyLoadPlugin with its name:
Plugin nameDescription
CustomEaseDefine custom SVG-path-based easing curves
DraggableDrag-and-drop with physics boundaries
FlipSeamless layout-to-layout state transitions
MotionPathPluginAnimate elements along SVG paths
ObserverUnified scroll, drag, pointer, and wheel observation
ScrollToPluginSmooth programmatic scroll-to-position
TextPluginCharacter-by-character text replacement tweens
EasePackExtended easing functions (e.g. SlowMo, RoughEase)
ScrollTrigger is registered at module load time — you never need to call lazyLoadPlugin('ScrollTrigger').

​
Usage Example

The following pattern is taken from the ascii-hand sketch, which uses useGsapContext to create a scroll-driven ASCII curtain reveal and staggered text animation: 
const { gsap, useGsapContext } = useGsap()

onMounted(() => {
  useGsapContext(rootRef, () => {
    gsap.from('.item', { autoAlpha: 0, y: 20, stagger: 0.1 })

    gsap.to(curtain.value, {
      offset: 0,
      duration: 1,
      ease: 'power3.out',
      scrollTrigger: {
        trigger: triggerRef.value,
        start: 'top 80%',
        toggleActions: 'play reverse play reverse',
      },
    })
  })
})
All tweens and ScrollTrigger instances created inside the useGsapContext callback are automatically reverted when the component’s Vue scope is disposed — no manual ctx.revert() call needed.

​
Lazy Plugin Loading Example

const { lazyLoadPlugin } = useGsap()

onMounted(async () => {
  const Flip = await lazyLoadPlugin('Flip')
  // Flip is now registered and ready to use
  Flip.from(listItems, { duration: 0.6, ease: 'power2.inOut' })
})

Build docs developers (and LLMs) love

Get started for freeTalk to us