2.1.2

- IMPROVED: perfromance

- FIXED: in some cases, the context would get reverted when it shouldn’t.

- FIXED: dependencies switched to peer dependencies

Author: jackdoyle

README.md

@@ -30,6 +30,8 @@ import { useRef } from "react";
 import gsap from "gsap";
 import { useGSAP } from "@gsap/react";
 
+gsap.registerPlugin(useGSAP); // register any plugins, including the useGSAP hook
+
 const container = useRef();
 useGSAP(() => {
     // gsap code here...
@@ -84,9 +86,14 @@ useGSAP(() => {
 npm install @gsap/react
 ```
 
+At the top of your code right below your imports, it's usually a good idea to register `useGSAP` as a plugin:
+```javascript
+gsap.registerPlugin(useGSAP);
+```
+
 ## Using callbacks or event listeners? Use `contextSafe()` and clean up!
 
-A function is considered "context-safe" if it is properly scoped to a <a href="https://gsap.com/docs/v3/GSAP/gsap.context()">`gsap.context()`</a> so that any GSAP-related objects created **while that function executes** are recorded by that `Context` and use its `scope` for selector text. When that `Context` gets reverted (like when the hook gets torn down or re-synchronizes), so do all of those GSAP-related objects. Cleanup is important in React and `Context` makes it simple. Otherwise, you'd need to manually keep track of all your animations and `revert()` them when necessary, like when the entire component gets unmounted/remounted. `Context` does that work for you.
+A function is considered "context-safe" if it is properly scoped to a <a href="https://gsap.com/docs/v3/GSAP/gsap.context()">`gsap.context()`</a> so that any GSAP-related objects created **while that function executes** are recorded by that `Context` and use its `scope` for selector text. When that `Context` gets reverted (like when the hook gets torn down or re-synchronizes), so will all of those GSAP-related objects. Cleanup is important in React and `Context` makes it simple. Otherwise, you'd need to manually keep track of all your animations and `revert()` them when necessary, like when the entire component gets unmounted/remounted. `Context` does that work for you.
 
 The main `useGSAP(() => {...})` function is automatically context-safe of course. But if you're creating functions that get called **AFTER** the main `useGSAP()` function executes (like click event handlers, something in a `setTimeout()`, or anything delayed), you need a way to make those functions context-safe. Think of it like telling the `Context` when to hit the "record" button for any GSAP-related objects. 
 
@@ -208,4 +215,4 @@ Ask in the friendly <a href="https://gsap.com/community/">GSAP forums</a>. Or sh
 ### License
 GreenSock's standard "no charge" license can be viewed at <a href="https://gsap.com/standard-license">https://gsap.com/standard-license</a>. <a href="https://gsap.com/pricing/">Club GSAP</a> members are granted additional rights. See <a href="https://gsap.com/licensing/">https://gsap.com/licensing/</a> for details. Why doesn't GSAP use an MIT (or similar) open source license, and why is that a **good** thing? This article explains it all: <a href="https://gsap.com/why-license/" target="_blank">https://gsap.com/why-license/</a>
 
-Copyright (c) 2008-2024, GreenSock. All rights reserved. 
+Copyright (c) 2008-2025, GreenSock. All rights reserved. 

dist/index.js

@@ -1,8 +1,8 @@
 /*!
- * @gsap/react 2.1.1
+ * @gsap/react 2.1.2
  * https://gsap.com
  *
- * @license Copyright 2024, GreenSock. All rights reserved.
+ * @license Copyright 2025, GreenSock. All rights reserved.
  * Subject to the terms at https://gsap.com/standard-license or for Club GSAP members, the agreement issued with that membership.
  * @author: Jack Doyle, jack@greensock.com
  */
@@ -15,7 +15,7 @@
 
   gsap = gsap && Object.prototype.hasOwnProperty.call(gsap, 'default') ? gsap['default'] : gsap;
 
-  let useIsomorphicLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect,
+  let useIsomorphicLayoutEffect = typeof document !== "undefined" ? react.useLayoutEffect : react.useEffect,
     isConfig = value => value && !Array.isArray(value) && typeof value === "object",
     emptyArray = [],
     defaultConfig = {},
@@ -39,16 +39,16 @@
       context = react.useRef(_gsap.context(() => {}, scope)),
       contextSafe = react.useRef(func => context.current.add(null, func)),
       deferCleanup = dependencies && dependencies.length && !revertOnUpdate;
+    deferCleanup && useIsomorphicLayoutEffect(() => {
+      mounted.current = true;
+      return () => context.current.revert();
+    }, emptyArray);
     useIsomorphicLayoutEffect(() => {
       callback && context.current.add(callback, scope);
       if (!deferCleanup || !mounted.current) {
         return () => context.current.revert();
       }
     }, dependencies);
-    deferCleanup && useIsomorphicLayoutEffect(() => {
-      mounted.current = true;
-      return () => context.current.revert();
-    }, emptyArray);
     return {
       context: context.current,
       contextSafe: contextSafe.current

dist/index.min.js

@@ -1,6 +1,6 @@
 {
   "name": "@gsap/react",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "Tools for using GSAP in React, like useGSAP() which is a drop-in replacement for useLayoutEffect()/useEffect()",
   "main": "./dist/index.js",
   "module": "./src/index.js",
@@ -23,9 +23,9 @@
   ],
   "author": "Jack Doyle (jack@greensock.com)",
   "license": "SEE LICENSE AT https://gsap.com/standard-license",
-  "dependencies": {
+  "peerDependencies": {
     "gsap": "^3.12.5",
-    "react": ">=16"
+    "react": ">=17"
   },
   "bugs": {
     "url": "https://gsap.com/community/"

package.json

@@ -1,8 +1,8 @@
 /*!
- * @gsap/react 2.1.1
+ * @gsap/react 2.1.2
  * https://gsap.com
  *
- * Copyright 2008-2024, GreenSock. All rights reserved.
+ * Copyright 2008-2025, GreenSock. All rights reserved.
  * Subject to the terms at https://gsap.com/standard-license or for
  * Club GSAP members, the agreement issued with that membership.
  * @author: Jack Doyle, jack@greensock.com
@@ -11,7 +11,7 @@
 import { useEffect, useLayoutEffect, useRef } from "react";
 import gsap from "gsap";
 
-let useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect,
+let useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect,
     isConfig = value => value && !Array.isArray(value) && typeof(value) === "object",
     emptyArray = [],
     defaultConfig = {},
@@ -33,16 +33,16 @@ export const useGSAP = (callback, dependencies = emptyArray) => {
         context = useRef(_gsap.context(() => { }, scope)),
         contextSafe = useRef((func) => context.current.add(null, func)),
         deferCleanup = dependencies && dependencies.length && !revertOnUpdate;
+  deferCleanup && useIsomorphicLayoutEffect(() => {
+    mounted.current = true;
+    return () => context.current.revert();
+  }, emptyArray);
   useIsomorphicLayoutEffect(() => {
     callback && context.current.add(callback, scope);
     if (!deferCleanup || !mounted.current) { // React renders bottom-up, thus there could be hooks with dependencies that run BEFORE the component mounts, thus cleanup wouldn't occur since a hook with an empty dependency Array would only run once the component mounts.
       return () => context.current.revert();
     }
   }, dependencies);
-  deferCleanup && useIsomorphicLayoutEffect(() => {
-      mounted.current = true;
-      return () => context.current.revert();
-    }, emptyArray);
   return { context: context.current, contextSafe: contextSafe.current };
 };
 useGSAP.register = core => { _gsap = core; };