GSAP React

!npm

Collection of React utilities and hooks for GSAP.

---

$3

- Requires gsap version 3.11.0 or newer

###### npm

``shell
npm install gsap-react gsap
`

###### yarn

`shell
yarn add gsap-react gsap
`

###### pnpm

`shell
pnpm add gsap-react gsap
`

Hooks

#### useGsapContext

Memoises a GSAP Context instance.

$3

`tsx
import { useGsapContext } from 'gsap-react'
import { useLayoutEffect, useRef } from 'react'

function App() {
const ref = useRef(null)
const ctx = useGsapContext(ref)

useLayoutEffect(() => {
ctx.add(() => {
gsap.to('.box', {
x: 200,
stagger: 0.1,
})
})
return () => ctx.revert()
}, [])

return (


#### useGsapEffect

Use register effect.

$3

`tsx
import { useGsapEffect } from 'gsap-react'
import { useRef } from 'react'

function App() {
const box = useRef()
const animation = useGsapEffect(box, 'spin')

return Hello
}
`

#### useSelector

Query selector

$3

`tsx
import { gsap } from 'gsap'
import { useSelector } from 'gsap-react'
import { useLayoutEffect } from 'react'

function App() {
const [q, ref] = useSelector(null)

useLayoutEffect(() => {
gsap.to(q('.box'), { x: 200 })
}, [])

return (


#### useStateRef

This hook helps solve the problem of accessing stale values in your callbacks. It works exactly like useState, but returns a third value, a ref with the current state.

$3

`tsx
const [count, setCount, countRef] = useStateRef(5)
const [gsapCount, setGsapCount] = useState(0)

useLayoutEffect(() => {
const ctx = gsap.context(() => {
gsap.to('.box', {
x: 200,
repeat: -1,
onRepeat: () => setGsapCount(countRef.current),
})
}, app)
return () => ctx.revert()
}, [])
`

See demo

#### useMatchMedia

GSAP MatchMedia

$3

`tsx
import { gsap } from 'gsap'
import { useMatchMedia } from 'gsap-react'
import { useLayoutEffect, useRef } from 'react'

function App() {
const ref = useRef(null)
const mm = useMatchMedia(ref)

useLayoutEffect(() => {
mm.add('(min-width: 768px)', () => {
gsap.to(q('.box'), { x: 200 })
})

return () => mm.revert()
}, [])

return (


#### useMergeRefs

Merge multiple refs, useful especially when using with forwardRef.

$3

`tsx
import { gsap } from 'gsap'
import { useMergeRefs } from 'gsap-react'
import { forwardRef, useLayoutEffect, useRef } from 'react'

const Button = forwardRef(({ children, ...props }, ref) => {
const internalRef = useRef(null)
const refs = useMergeRefs(ref, internalRef)

useLayoutEffect(() => {
let ctx = gsap.context(() => {}, internalRef)
}, [])

return (

{children}

)
})
`

$3

Server side rendering (SSR)

$3

`tsx
import { gsap } from 'gsap'
import { useIsomorphicLayoutEffect } from 'gsap-react'
import { useRef } from 'react'

function App() {
const app = useRef()

useIsomorphicLayoutEffect(() => {
const ctx = gsap.context(() => {
gsap.from('.box', { opacity: 0 })
}, app)
return () => ctx.revert()
}, [])

return (


This component uses GSAP ScrollSmoother that applies scroll smoothing functionality and easily create elements with different scrolling speed or parallax effects, see docs. Under the hood it register the required plugins gsap.registerPlugin(ScrollTrigger, ScrollSmoother)

> 🔵 NOTE: This component needs a Club GreenSock membership.

$3

`tsx
import { SmoothScroll } from 'gsap-react'

function App() {
return (



It accepts options props for customizing the ScrollSmoother. You can also disable the initial wrapper by setting the props noInitialWrapper to true if you plan to create your own wrapper element, just make sure to provide wrapper and content selector inside the options props. default is #smooth-wrapper and #smooth-content.

$3

First create a AppWrapper.tsx and add "use client" directive at the top.

`tsx
'use client'

import { SmoothScroll } from 'gsap-react'

interface AppWrapperProps {
children?: React.ReactNode
}

function AppWrapper({ children }: AppWrapperProps) {
return {children}
}
`

And import it in your root layout file.

`tsx
function RootLayout({ children }: { children?: React.ReactNode }) {
return (



{children}


)
}
`

$3

You may encounter some issues when you have a component that uses ScrollTrigger. To fix this we need to wait for ScrollSmoother plugin to initialize, we can use the useSmoothScroll hook to get the state of the smoother.

`tsx
'use client'

import { gsap } from 'gsap'
import { useIsomorphicLayoutEffect, useSmoothScroll } from 'gsap-react'
import { useRef } from 'react'

function MyComponent() {
const { smoother } = useSmoothScroll()

const ref = useRef(null)

useIsomorphicLayoutEffect(() => {
if (!smoother) return

let ctx = gsap.context(() => {
gsap.to('.box', {
scale: 2,
scrollTrigger: {
trigger: ref.current,
},
})
}, ref)

return () => ctx.revert()
}, [smoother])

return (