Jump to content
Search Community

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

dfagan2 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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?

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

  • 2 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...