If a animation target's sibling is a text node with whitespaces, it should be recognized as a empty element.

[cadenzah]

Hello, thanks for developing and maintaining this library as I'm using it very well for my project.

I use GSAP with my Nuxt.js app, and I recently upgraded the version of Nuxt to the latest one. After that a previously well-functioned feature does not work anymore.

As I dived into the issue, I figured out that it was caused from the GSAP's CSSPlugin code; _getMatrix() function:

// https://github.com/greensock/GSAP/blob/master/src/CSSPlugin.js#L464
parent = target.parentNode;
if (!parent || !target.offsetParent) {
	addedToDOM = 1; //flag
	nextSibling = target.nextSibling;
	_docElement.appendChild(target); //we must add it to the DOM in order to get values properly
}
matrix = _getComputedTransformMatrixAsArray(target);
temp ? (style.display = temp) : _removeProperty(target, "display");
if (addedToDOM) {
	nextSibling ? parent.insertBefore(target, nextSibling) : parent ? parent.appendChild(target) : _docElement.removeChild(target);
}

When I use GSAP tween or timeline, and when it happens that the target element is appended after body tag(I don't know why, but after the animation runs it temporarily gets appended next to the body tag), the target's nextSibling becomes empty text node. Literally, it is a text node which contains only empty whitespace and it's lingering right after the body tag, so it does not even show up if I look at it in Chrome inpector.

As a result, even if it's practically empty node, so it could be quite correct to expect nextSibling be null, it is still a NOT-EMPTY element so the code goes into a contional statement of addedToDOM in which the nextSibling is being inserted. Of course in this case, an error occurs like below:

Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

So I suggest that nextSibling get checked if it is an empty text node like below:

nextSibling = target.nextSibling;
if (nextSibling.nodeName === '#text' && nextSibling.nodeValue.trim() === '') {
    nextSibling = null;
}

Please review this and see if this is an adequate modification.
Regards

[cadenzah]

It seems there is nextElementSibling property which does similar job but it also checks whether the sibling element is empty or not. I think this can replace the empty-element-check-statement I wrote above.

if (!parent || !target.offsetParent) {
	addedToDOM = 1; //flag
	// nextSibling = target.nextSibling;
	nextSibling = target.nextElementSibling;
	_docElement.appendChild(target); //we must add it to the DOM in order to get values properly
}

Remarks

• Node.nextSibling

[jackdoyle]

Thanks for pointing that out, @cadenzah

It should be resolved in the next release which you can preview at https://assets.codepen.io/16327/gsap-latest-beta.min.js

Better?

[cadenzah]

@jackdoyle That is nice! Hope to see the next release soon.

[jackdoyle]

Fixed in latest release.