Jump to content


I'm getting a "end.match is not a function" error in GSAP

Go to solution Solved by GreenSock,

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 am getting the following GSAP error on every version starting with 1.18.0.  (Here, I'm using 1.19.0 uncompressed:)


TypeError: end.match is not a function TweenMax.js:6888


and the stack trace is:


_blobDif() TweenMax.js:6888
_addPropTween() TweenMax.js:6944
p._initProps() TweenMax.js:7272
p._init() TweenMax.js:7204
p.render() TweenMax.js:242
p.render() TimelineMax.js:313
p.render() TweenMax.js:6730
TweenLite.render() TweenMax.js:6992
p.dispatchEvent() TweenMax.js:6154
_tick() TweenMax.js:6206


(The error occurs in the minified version too.)


I am using Firefox 49.0.


Is anyone else getting this error? 


When I substitute any earlier versions (1.17.0 or less), GSAP works fine for me.


I put in some tracing at the error point, and I found that the variable "end" is a boolean with a value of true.  Of course, a boolean doesn't have a ".match" method, so that's the direct cause of the error.


It looks like the "end" variable was first introduced in version 1.18.0.


Link to comment
Share on other sites

Hmmm...I wonder if you're using an outdated plugin or something (like AttrPlugin from the 1.14.0 release with TweenMax 1.19.0). Is there any way you could provide a reduced test case so we can see what's going on in context? I've never seen this error, nor has anyone else reported it. Could you post a simple codepen or jsfiddle? Pretty please? :)

Link to comment
Share on other sites

I'm not using any plugins.


It's quite a challenge for me to reduce my code to a small test case because of the way it's structured.  But fortunately, I found some old test code from years ago that's only 1500 lines and exhibits the bug.   It's attached.



Link to comment
Share on other sites

  • Solution

Thanks for the demo. After studying it for a few hours, I discovered that the problem had to do with the fact that you're animating to different data types on the same property, like "visible" is going from "inherit" (string) to false (boolean). One of the big enhancements in 1.18.0 was that it allows you to animate strings of text - it'll isolate the numbers inside the string that need to change and just animate those. So it was recognizing that the data type of the property itself was a string (when "inherit") and attempting to find the numbers inside your end value, but it was a boolean so that ain't gonna work :) 


Obviously it's very rare to run into a situation like this where the beginning and ending values are completely different data types, but I think I've got a solution in place. Please kick the tires in the preview (uncompressed) of 1.19.1: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js



Link to comment
Share on other sites

It's working perfectly with your new beta.  I'm very impressed with your response time, and with the high level of continued support that GSAP is getting.  It's obvious that I made an excellent decision to use GSAP.

  • Like 1
Link to comment
Share on other sites

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.