Maximum Call Stack error when trying to animate background position offset from keywords

[dfagan2]

I have a parallax effect tied to a CSS class that I apply and ask TweenLite to graduate over the length of a hero (with the help of ScrollMagic.io)

TweenLite.to(".top-hero", 1, { className: "+=parallaxed" })

When the CSS is set up to go from one 2-pair value to another, everything works great:

.top-hero {
	background-position: center 0px;

	&.parallaxed {
		background-position: center 100px;
	}
}

...but I instead need to set it up as offsets from a keyword position:

.top-hero {
	background-position: left 50% bottom 0px;

	&.parallaxed {
		background-position: left 50% bottom -100px;
	}
}

...which is what breaks with the follow error:

TweenMax.js:2839 Uncaught RangeError: Maximum call stack size exceeded
    at String.split (<anonymous>)
    at _parsePosition (TweenMax.js:2839)
    at _parsePosition (TweenMax.js:2847)
    at _parsePosition (TweenMax.js:2847)
    at _parsePosition (TweenMax.js:2847)
    at _parsePosition (TweenMax.js:2847)
    at _parsePosition (TweenMax.js:2847)
    at _parsePosition (TweenMax.js:2847)
    at _parsePosition (TweenMax.js:2847)
    at _parsePosition (TweenMax.js:2847)

which is pointing to the "_parsePosition" function.

 

Any tips on getting around this?

[ZachSaucier]

Hey dfagain2 and welcome to the forums.

 

We don't recommend using class name tweens. They are actually going to be deprecated in the next version of GSAP. We recommend tweening the individual values instead, which I think should fix your error in this case. It's a lot of hard work for GSAP to know what to tween using class name tweens like this.

[Arnost]

Hi Zach, 
I've stumbled upon the same issue here and I'm not using className tweens. 
The issue appears when using the four-value syntax for background tweens. 

See minimal reproduction case: 

See the Pen wvvEGZv by paralleluniv3rse (@paralleluniv3rse) on CodePen

[ZachSaucier]

I think having "center" like that is invalid for backgroundPosition according to MDN. But even with correct values the callstack is exceeded in GSAP 2 @GreenSock.

 

The good news is it works in GSAP 3! That should be reason to upgrade  

 

See the Pen VwwGKWK?editors=0010 by GreenSock (@GreenSock) on CodePen