ElliotGeno

If you don't think it is smart to expose it, that is fine. Especially if all it is doing is normalizing the developer's input. I am constantly handling color myself... so maybe I am just an edge case. Javascript is pretty forgiving in how you can use color. Maybe I will just wrap my most common color utils into it's own class and call it a day. I was just curious if you were doing some of the same conversions already.

@Diaco.AW These are the kinds of color conversions I am talking about... Strings vs Decimal values "#FF0000" (Pure red) can also be written as 0xFF0000. Logging the value of 0xFF0000 reveals its decimal value. console.log(0xFF0000);// logs 16711680 Extracting component RGB values Using bitwise math, you can break a decimal value into three component colors. function getComponentColors(color){ var red = (color >> 16) & 0xFF; var green = (color >> 8) & 0xFF; var blue = color % 0xFF; return [red, green, blue]; } getComponentColors(0xFF0000); //returns [255,0,0]; Converting RGB component values to HSL component values function RGBtoHSL(r, g, { r /= 255, g /= 255, b /= 255; var max = Math.max(r, g, , min = Math.min(r, g, ; var h, s, l = (max + min) / 2; if(max == min){ h = s = 0; // achromatic }else{ var d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch(max){ case r: h = (g - / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } return [h, s, l]; } RGBtoHSL(255,0,0);// returns [0,1,.5]; (saturation and lightness need to be multiplied by 100 for HSL() strings. Converting HSL components to RGB component colors HSL is nice for rotating colors around or adjusting saturation or brightness of colors... But sometimes you need to go back to RGB. function HSLtoRGB(h, s, l){ var r, g, b; if(s == 0){ r = g = b = l; // achromatic }else{ function hue2rgb(p, q, t){ if(t < 0) t += 1; if(t > 1) t -= 1; if(t < 1/6) return p + (q - p) * 6 * t; if(t < 1/2) return q; if(t < 2/3) return p + (q - p) * (2/3 - t) * 6; return p; } var q = l < 0.5 ? l * (1 + s) : l + s - l * s; var p = 2 * l - q; r = hue2rgb(p, q, h + 1/3); g = hue2rgb(p, q, h); b = hue2rgb(p, q, h - 1/3); } return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)]; } HSLtoRGB(0,1,.5); //returns [255,0,0] Combining RGB component colors to get decimal Individual RGB component values can be tweened as well, but you can convert them back to decimal values as well: function combineRGB(r, g, { return ( r << 16 ) | ( g << 8 ) | b ; } combineRGB(255,0,0); //returns 16711680 Getting Hex string from RGB decimal value Finally, if you want to convert the decimal RGB value to a string... var color=16711680; var hexString=color.toString(16); // returns string "FF0000"

Would it just be parsing the strings? How are you storing that data currently? Seems like you convert everything to RGBa at least when it's done. But I was wondering if the associated RGB components are stored in a separate object to tween. Basically the most common color functionalities I use is the following: Breaking hex color string into component Red Green and Blue values represented 0-255. (Starting in either form: #FF0000 or 0xFF0000); Recombining component colors via bitwise shifts to get decimal value of RGB colors. Parsing decimal value of RGB to hex string. (Probably not necessary since this is easy with toString(16); ) Converting RGBa and opacity component colors to HSLa components. (0-360, 0-100, 0-100, 0-1) toString() method for converting HSL a string I can apply. Obviously these are all things I can do, but would rather not duplicate efforts if a library is already doing it.

I see you automatically switch strings to RGBa... Is there some sort of Color Utils we can tap into so we don't have to roll our own. For instance, converting hex to RGB component colors. RGB components to HSL, HSL to RGB, RGB to hex is something I typically do to rotate the hue of a color. But rather than including additional code to handle that, I was curious if they were already built in and exposed for us to use.

When it comes to reducing file size there are several options... Optimize the Content Choose content that lends itself to better compression, and smaller file sizes. Use vector art or standard DOM elements where possible. (SVG and DIVs). This will reduce the amount of bitmap images the user needs to load. Use filters instead of bitmaps when possible. (While this reduce file size by not including PNGs, this could effect performance when used on items that move.) Use smaller bitmaps where possible. (Larger surface area usually translates to larger file size.) Sometimes you do not need full resolution images when things are blurry... just scale up a smaller image. Sometimes multiple bitmaps can be smaller than one single bitmap. (Layering multiple bitmaps, divs and SVG can reduce file size than the comparable JPEG.) Consider tiling repeating patterns instead of embedding the whole thing. Optimizing Bitmaps Retina JPGs - Doubling the dimensions of a JPG and shrinking it to 50% scale in HTML all while reducing its quality to around 30% will actually be smaller in file size that the normal size bitmap! Retina Revolution PNGs from Photoshop, the "24 bit" kind are HUGE. "8 bit" images from photoshop can be compressed like GIFs but result in crappy alpha channels. But there are tons of ways to compress PNGs besides what Photoshop gives you. ImageAlpha is perfect for reducing the color palette while retaining that perfect alpha channel. PNGs are usually reduced to 10-15% of their original size! ImageOptim is another great tool for any image, just drag and drop a folder of images or a select few of them and it will compress the JPGs GIFs or PNGs even further by taking off any extra metadata or useless information.

I was curious what text editors you guys are using for web development... I started with Sublime, but have been looking into Brackets lately. There seems to be a bunch of extensions being created around Brackets and I could definitely see Greensock adding, at the very least, documentation to it as a plugin. Perhaps even a code generator tool! This might be a good way to enhance devs' knowledge about Greensock. Also, if you have time to spare, check out the Adobe Max presentation on Brackets. Peter Flynn shows you the breadth of what it can do as well as walks you through some of the cooler extensions people have built.

I figured on keeping the syntax similar to TweenMax.set(); The first object would be either an array, object, or string for finding the selector. The callback was just a setter function and it would work as you described. Maybe I need to take a look at this TEMPLATE_TweenPlugin.js before moving forward.

You obviously have a few custom properties mixed in with real properties of elements. Let's say you created a generic way for both TweenMax and your users to register custom properties on a target object before calling a tween. Maybe it would share a little code throughout the user's application and TweenMax library that way. Plus you could create all sorts of custom effects or even enhance functionality of an everyday object or element! I could see the method call to register a new property looking something like this: TweenMax.addProperty(targetObject,"propertyName",callback,DataType); Internally, TweenMax would track and tween the value if it is a Number. Otherwise the user can use TweenMax.set() to apply changes to the object for other data types. Then it would use a callback to send the value to the user. The callback would look something like this: function callback(tween, propertyName, value){ //user stuff } This way, developers could make sure they create properties in an optimal way for you to handle. Obviously, there is onUpdate(), but this opens new possibilities for updates per property.

I will do some testing to be sure. But I had noticed in the past issues with specific versions of Firefox and transform-origin. (Whatever version I have installed at work.)

This sounds PERFECT! Great news Jack! I will give it a go tomorrow as we try to knock out some other bugs. I am curious how it works under the hood... In my experiments I was animating an off DOM element and copying the transform's matrix. I too ran into the issue with transform-origin. But I didn't get a chance to see if translating the matrix would fix it. I am assuming there is some underlying matrix math going on in TweenMax. Are you just handling internally with TweenMax and applying the attribute from this matrix? Also there might be one more thing you want to add to your SVG workflow... Firefox (some versions?- not sure) has a known bug with percentage based transform origins on SVG elements. There is a workaround by using pixel based transform origins instead. Would be another nice-to-have... Thanks again for this! Can't wait!