greensock/GSAP · warning

Element not found:

Error message

Element not found:

What it means

Flip's _getEl helper resolves a target selector/element to the first match via gsap.utils.toArray. If nothing matches (empty array) it warns "Element not found:" with the target and returns undefined (the console.warn return value). Callers like _parseElementState then build an ElementState with a null element.

Source

Thrown at src/Flip.js:25

 * @author: Jack Doyle, jack@greensock.com
*/
/* eslint-disable */

import { getGlobalMatrix, _getDocScrollTop, _getDocScrollLeft, Matrix2D, _setDoc, _getCTM } from "./utils/matrix.js";

let _id = 1,
	_toArray, gsap, _batch, _batchAction, _body, _closestTenth, _getStyleSaver,
	_forEachBatch = (batch, name) => batch.actions.forEach(a => a.vars[name] && a.vars[name](a)),
	_batchLookup = {},
	_RAD2DEG = 180 / Math.PI,
	_DEG2RAD = Math.PI / 180,
	_emptyObj = {},
	_dashedNameLookup = {},
	_memoizedRemoveProps = {},
	_listToArray = list => typeof(list) === "string" ? list.split(" ").join("").split(",") : list, // removes extra spaces contaminating the names, returns an Array.
	_callbacks = _listToArray("onStart,onUpdate,onComplete,onReverseComplete,onInterrupt"),
	_removeProps = _listToArray("transform,transformOrigin,width,height,position,top,left,opacity,zIndex,maxWidth,maxHeight,minWidth,minHeight"),
	_getEl = target => _toArray(target)[0] || console.warn("Element not found:", target),
	_round = value => Math.round(value * 10000) / 10000 || 0,
	_toggleClass = (targets, className, action) => targets.forEach(el => el.classList[action](className)),
	_reserved = {zIndex:1, kill:1, simple:1, spin:1, clearProps:1, targets:1, toggleClass:1, onComplete:1, onUpdate:1, onInterrupt:1, onStart:1, delay:1, repeat:1, repeatDelay:1, yoyo:1, scale:1, fade:1, absolute:1, props:1, onEnter:1, onLeave:1, custom:1, paused:1, nested:1, prune:1, absoluteOnLeave: 1},
	_fitReserved = {zIndex:1, simple:1, clearProps:1, scale:1, absolute:1, fitChild:1, getVars:1, props:1},
	_camelToDashed = p => p.replace(/([A-Z])/g, "-$1").toLowerCase(),
	_copy = (obj, exclude) => {
		let result = {}, p;
		for (p in obj) {
			exclude[p] || (result[p] = obj[p]);
		}
		return result;
	},
	_memoizedProps = {},
	_memoizeProps = props => {
		let p = _memoizedProps[props] = _listToArray(props);
		_memoizedRemoveProps[props] = p.concat(_removeProps);
		return p;
	},

View on GitHub (pinned to 13e2b79054)

Solutions

1. Verify document.querySelector(selector) returns the element before calling Flip APIs
2. Run Flip calls after mount/render (e.g. useEffect, mounted hook)
3. Fix selector typos and ensure only one matching element is intended
4. Pass an actual element reference instead of a selector string

Example fix

// before
const state = Flip.getState('.boxx'); // typo, no match
// after
const el = document.querySelector('.box');
if (el) {
  const state = Flip.getState(el);
}

const el = document.querySelector(selector);
if (!el) throw new Error(`Flip target not found: ${selector}`);
const state = Flip.getState(el);

function elementExists(target) {
  const el = typeof target === 'string' ? document.querySelector(target) : target;
  return el instanceof Element;
}

When it happens

Trigger: Passing Flip.getState() / Flip.from() / Flip.to() a selector that matches no DOM element, e.g. class typo, element not yet mounted, or target removed before the call.

Common situations: Calling Flip before React/Vue renders the elements; wrong selector string; running before document ready; conditional rendering removed the element.

Related errors

• ${elOrNode} not found
• Element not found: ${t}
• ScrollSmoother needs a valid content element.
• scrollTo target doesn't exist. Using 0
• Not a valid state object.

AI-assisted analysis of greensock/GSAP@13e2b79054 (2026-08-29). Data as JSON: /api/errors/60a0c5a445dba1dc. Report an issue: GitHub.