Jump to content
Search Community

ColorPropsPlugin.min.js throws error

MT test
Moderator Tag

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

Hi,

 

I am combining multiple files into one. The order is:

 

1)ScrollTo

2)DrawSVG

3)ColorPropsPlugin(1.5.0)

4)TweenMax

 

I have just updated from 1.17.1 to 1.19.1

 

The ColorPropsPlugin throws an error:

 

TypeError: i is undefined - on column 3096
 
 
If I am using ColorPropsPlugin(1.3.0) It works.
 
Thank you!
 

 

 

Link to comment
Share on other sites

Hm, I don't see anywhere that'd cause that problem - could you please provide a reduced test case so we can poke around and see what's going on? It almost sounds like maybe the code you're pasting is missing some stuff or nested incorrectly or something weird like that. Very tough to troubleshoot blind, though. Any chance you could shoot us a codepen or something we can test ourselves? 

Link to comment
Share on other sites

Hm, I just tried with your file and didn't get any errors (well, once I removed the bottom part that referenced jQuery...because I was trying to isolate things with GSAP and didn't want a jQuery dependency). I tried a few different tweens. Zero errors. Can you please provide a reduced test case that shows the error happening? 

Link to comment
Share on other sites

I can't give you a codepen. I am just loading one file containing min.js of your package.

 

If i replace ColorPropsPlugin(1.5.0) and put the old 1.3.0 the error doesn't show.

 

This is what Chrome says about the Same Error:

Uncaught TypeError: Cannot read property 'defaultStringFilter' of undefined
    at Array.<anonymous> (wpmc_greensock.js:46)

Link to comment
Share on other sites

I am using this line of code to capture my version of TweenMax ( in case other plugins load their own version )

 

wpmc.greensock = {};

window.GreenSockGlobals = {};

window._gsQueue = window._gsDefine = null;

 

If I comment "window.GreenSockGlobals = {};"  the error goes away. Can you advise how should I do to store my own version of TweenMax ?

 

Do I need the line in order to capture my own version of TweenMax?

 

Thank you!

Link to comment
Share on other sites

  • Solution

Ah, okay, I see what you mean - that'd only happen when you're declaring your own GreenSockGlobals object and loading ColorPropsPlugin from GSAP 1.19.0 or 1.19.1. Here's a revised minified chunk of code that you can drop into your project to resolve things (it'll be in the next official release of GSAP as well, of course): 

/*!
 * VERSION: beta 1.5.1
 * DATE: 2017-01-23
 * UPDATES AND DOCS AT: http://greensock.com
 *
 * @license Copyright (c) 2008-2017, GreenSock. All rights reserved.
 * This work is subject to the terms at http://greensock.com/standard-license or for
 * Club GreenSock members, the software agreement that was issued with your membership.
 * 
 * @author: Jack Doyle, jack@greensock.com
 **/
var _gsScope="undefined"!=typeof module&&module.exports&&"undefined"!=typeof global?global:this||window;(_gsScope._gsQueue||(_gsScope._gsQueue=[])).push(function(){"use strict";var a,b,c=/(\d|\.)+/g,d=/(?:\d|\-\d|\.\d|\-\.\d|\+=\d|\-=\d|\+=.\d|\-=\.\d)+/g,e={aqua:[0,255,255],lime:[0,255,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,255],navy:[0,0,128],white:[255,255,255],fuchsia:[255,0,255],olive:[128,128,0],yellow:[255,255,0],orange:[255,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[255,0,0],pink:[255,192,203],cyan:[0,255,255],transparent:[255,255,255,0]},f=function(a,b,c){return a=0>a?a+1:a>1?a-1:a,255*(1>6*a?b+(c-B)*a*6:.5>a?c:2>3*a?b+(c-B)*(2/3-a)*6:B)+.5|0},g=function(a,B){var g,h,i,j,k,l,m,n,o,p,q;if(a)if("number"==typeof a)g=[a>>16,a>>8&255,255&a];else{if(","===a.charAt(a.length-1)&&(a=a.substr(0,a.length-1)),e[a])g=e[a];else if("#"===a.charAt(0))4===a.length&&(h=a.charAt(1),i=a.charAt(2),j=a.charAt(3),a="#"+h+h+i+i+j+j),a=parseInt(a.substr(1),16),g=[a>>16,a>>8&255,255&a];else if("hsl"===a.substr(0,3))if(g=q=a.match(c),B){if(-1!==a.indexOf("="))return a.match(d)}else k=Number(g[0])%360/360,l=Number(g[1])/100,m=Number(g[2])/100,i=.5>=m?m*(l+1):m+l-m*l,h=2*m-i,g.length>3&&(g[3]=Number(a[3])),g[0]=f(k+1/3,h,i),g[1]=f(k,h,i),g[2]=f(k-1/3,h,i);else g=a.match(c)||e.transparent;g[0]=Number(g[0]),g[1]=Number(g[1]),g[2]=Number(g[2]),g.length>3&&(g[3]=Number(g[3]))}else g=e.black;return b&&!q&&(h=g[0]/255,i=g[1]/255,j=g[2]/255,n=Math.max(h,i,j),o=Math.min(h,i,j),m=(n+o)/2,n===o?k=l=0:(p=n-o,l=m>.5?p/(2-n-o):p/(n+o),k=n===h?(i-j)/p+(j>i?6:0):n===i?(j-h)/p+2:(h-i)/p+4,k*=60),g[0]=k+.5|0,g[1]=100*l+.5|0,g[2]=100*m+.5|0),g},h=function(a,B){var c,d,e,f=(a+"").match(j)||[],h=0,i=f.length?"":a;for(c=0;c<f.length;c++)d=f[c],e=a.substr(h,a.indexOf(d,h)-h),h+=e.length+d.length,d=g(d,B),3===d.length&&d.push(1),i+=e+(b?"hsla("+d[0]+","+d[1]+"%,"+d[2]+"%,"+d[3]:"rgba("+d.join(","))+")";return i+a.substr(h)},i=(_gsScope.GreenSockGlobals||_gsScope).TweenLite,j="(?:\\b(?:(?:rgb|rgba|hsl|hsla)\\(.+?\\))|\\B#(?:[0-9a-f]{3}){1,2}\\b",k=_gsScope._gsDefine.plugin({propName:"colorProps",version:"1.5.1",priority:-1,API:2,global:!0,init:function(a,c,d,e){var f,h,i,j;this._target=a,this._proxy=h="NUMBER"===(c.format+"").toUpperCase()?{}:0;for(f in c)"format"!==f&&(h?(this._firstNumPT=i={_next:this._firstNumPT,t:a,p:f,f:"function"==typeof a[f]},h[f]="rgb("+g(i.f?a[f.indexOf("set")||"function"!=typeof a["get"+f.substr(3)]?f:"get"+f.substr(3)]():a[f]).join(",")+")",j=c[f],"function"==typeof j&&(j=j(e,a)),this._addTween(h,f,"get","number"==typeof j?"rgb("+g(j,!1).join(",")+")":j,f,null,null,B)):this._addTween(a,f,"get",c[f],f,null,null,b,e));return!0},set:function(a){var b,c=this._firstNumPT;for(this._super.setRatio.call(this,a);c;)b=g(this._proxy[c.p],!1),b=b[0]<<16|b[1]<<8|b[2],c.f?this._target[c.p](B):this._target[c.p]=b,c=c._next}});for(a in e)j+="|"+a+"\\b";j=new RegExp(j+")","gi"),k.colorStringFilter=b=function(a){var b,c=a[0]+a[1];j.lastIndex=0,j.test(c)&&(b=-1!==c.indexOf("hsl(")||-1!==c.indexOf("hsla("),a[0]=h(a[0],B),a[1]=h(a[1],B))},i.defaultStringFilter||(i.defaultStringFilter=k.colorStringFilter),k.parseColor=g,a=k.prototype,a._firstNumPT=null,a._kill=function(B){for(var c,d=this._firstNumPT;d;)d.p in b?(d===a._firstNumPT&&(this._firstNumPT=d._next),c&&(c._next=d._next)):c=d,d=d._next;return this._super._kill(B)}}),_gsScope._gsDefine&&_gsScope._gsQueue.pop()(),function(a){"use strict";var b=function(){return(_gsScope.GreenSockGlobals||_gsScope)[a]};"function"==typeof define&&define.amd?define(["TweenLite"],B):"undefined"!=typeof module&&module.exports&&(require("../TweenLite.js"),module.exports=b())}("ColorPropsPlugin");

Better?

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.
×
×
  • Create New...