ElliotGeno

I suppose you could animate a value and use setValue onUpdate.

Actually, it looks like the key nugget I was looking for is Throwable! I had no idea it existed! http://greensock.com/docs/#/HTML5/Plugins/ThrowPropsPlugin/ Looks like I will need to catch up on this before moving forward!

So I started creating my own tumbler effect using canvas. I have the rendering down perfect, but I needed to add the interactivity. Essentially I draw an SVG of numbers into a canvas element to use as a sprite sheet. I then blit the numerals onto the display depending on where I need them. Works very fast! I then started writing my own events for touch dragging and throwing but kind of got stuck coming up with snapping to a specific target point. I then remembered Greensock had a plugin for such a thing! But the problem is that it is based on physical elements... not applying the effect to a generic object. I wonder if there is someway to hack Draggable to make use of it for things other than elements. Basically just use it to tween a value instead? The only way I can think of is by creating some transparent div to throw. Or perhaps there is a better way to just find out how to calculate and adjust the target based on the velocity of the object.

@OSUblake Is cubic the most performant? If so, I think I could design something that automates the cubic bezier handles. (Basically balance the control points based on other neighboring points.) Optionally allow handles to be overridden by users. (each anchor would toggle between auto-bezier, manual-bezier, and point/'zero-radius') What do you think of that?

Other than chaining multiple tweens, it is rather difficult to adjust a property that needs to return to the same value. I've run into this a lot, but have a hard time articulating the need. Recently, I was reading a blog about various animation tools and Mo.js came up which I wasn't familiar with. (Don't worry Jack... I'm not switching!) What was interesting is they visualized my need in a graph: http://mojs.io/tutorials/easing/path-easing/ Rather than easing from 0>1 it eases through various values back to 0. (0>0) Like this: I realize you can create your own easing function, and the new modProperties feature can help with this... And it is probably a serious undertaking as there are probably some internal checks that you need to do if a custom ease is applied to allow the property to tween. But this would be extremely useful! Perhaps there are some unique tricks you can pull out of your hat?

Could be just an optical illusion, but there seems to be easing on it... Even with Linear.easeNone. Also is opacity a property that can't be handled with this? http://codepen.io/pyrografix/pen/WxdwXK?editors=0010

I really like this! The first thing that popped into my head was elliptical motion: http://codepen.io/pyrografix/pen/GqOZQz?editors=0010 @Jack @Carl I tried the scale property but it didn't work properly though. Any suggestions as to why? http://codepen.io/pyrografix/pen/QEOPwK?editors=0011 I am thinking it is because scale is a composite of scaleX and scaleY. (scaleX and scaleY work independently)

Actually I spoke too soon... Apparently it only worked for that one example: As soon as I tried it on a different shape it went crazy again: http://codepen.io/pyrografix/pen/VayZRw

Thanks guys! I also found this worked where 10 is half the width and height for both transform origin and offsets but I like your solution better! var path = MorphSVGPlugin.pathDataToBezier(".path",{offsetX:-10,offsetY:-10}); var bee = document.querySelector(".bee"); TweenMax.to(bee, 20, { force3D:true, bezier: { type: "cubic", values: path, autoRotate:true }, ease:Linear.easeNone, repeat:-1, transformOrigin:"10 10" });

If I wanted to offset the position of that arrow to center it on the line... How would I go about doing that? I tried using a transformOrigin, but that makes it look worse.

I found this HTML validator. Hope it helps someone! https://validator.w3.org/#validate_by_input

I was curious if there was a way to clone a reference to a tween. Similar to how TimelineMax.add( TweenMax.to("blah",.5,{x:50}) ); can include any sort of tween method in it as an argument and call it at a later date. For example: I want to create a generic method that could clone any reference any type of tween or timeline... kill or somehow pause that tween from the argument... then call a new tween or cloned tween at a later date. Like this: addEvent(element,"mouseover", TweenMax.to(element,.5,{backgroundColor:"red"}); addEvent(element,"mouseout", TweenMax.to(element,.5,{backgroundColor:"grey"}); function addEvent(object, event, tweenObject){ // clone and kill or delay event object.addEventListener(event,function(e){ // trigger new cloned tween on event }); } This is simplified from what I am trying to do... Hopefully I am being clear enough! Assume that we don't know the Tween type or Timeline method we are calling. I'd hate to have a ton of conditional logic that detects what type of tween or which method to call.

Like ripping a Band-Aid off... while you are still bleeding. The tools simply are not there yet for designers to create HTML5 banners. The code these tools spit out are a rats nest of code I would not want to debug. You are better off hand coding these banners. Unlike Flash, it's an exercise better suited for those with development skills. Banner ads are typically handled by designers, so a shift in the types of associates applied to the work will need to change. Luckily Greensock is there for us designers/developers hybrid types! These new specs are still woefully inept. This was an opportunity for the IAB to fix problems with the old standards. For example the 160x600 has almost 150% of the surface area... which is a direct translation to file size. They could have used this opportunity to optimize specs per creative layout. Also, why are there still specs for frame rate for HTML5? I understand it for video... but HTML5 doesn't have a frame rate you can control like Flash. Also, libraries like Greensock are essential to building these things. We not only NEED them and they SHOULD be externalized so they are cached on the user's machine. And the SHOULD NOT count against your file size. Why make the users load 30% of the banner every single ad that displays? That is just ignorance.

Is stagger the only one that can accept this randomized function? I kind of like alt... easiest to type and it could either stand for alternate or alternative which, to me, seems to be what its doing. Supplying alternative values.

Obviously, anything to reduce the amount of code would still be helpful as this is for a banner ad!

Sorry, I guess I should have been more clear... I don't really need to tween the HSL color per say. I actually am get the RGB color switching to HSL bumping up or down the brightness then tweening to that color I ended up rolling my own version of Hex to RGB to HSL and then adjust the lightness then tween to that color. Here is what I ended up with: var rgb=getRGB(element.getAttribute("fill")); var hsl=getHSL(rgb); var targetLightness=Math.max(Math.min(hsl.lightness+(i%2==0?amount:-amount),100),0); function getRGB(hex) { hex = typeof hex == 'string' || hex instanceof String ? parseInt(hex.replace(/^#/, ''), 16) : hex; return {red:(hex >> 16) & 0xFF, green:(hex >> 8) & 0xFF, blue:hex & 0xFF}; } function getHSL(rgb) { var r = rgb.red; var g = rgb.green; var b = rgb.blue; 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 {hue:h * 360, saturation:s * 100, lightness:l * 100}; };

Ok guys... I have a newer update. THIS one is about three times more bad ass... TweenMax Alternate Pattern This works much the same way as before except now the property gets an array of positions. So if you just wanted to alternate between red and green it would look like this: TweenMax.staggerTo(".bob",.5,{alternate:{backgroundColor:["red","green"]}},.1); You can also add any number of alternate values to this list. SO you could do something like this and have 6 color variations... TweenMax.staggerTo(".bob",.5,{alternate:{backgroundColor:["red","yellow","green","cyan","blue","violet"]}},.1); If there are more items than there are in the alternate array, it loops back to the beginning of the array. So if you had 5 items, and three colors it would look like this: red, green, blue, red, green OH... and I almost forgot to tell you... it plays well with variables duplicated outside of the alternate array. So for example: TweenMax.staggerTo(".bob",.5,{alternate:{backgroundColor:["red","green","blue"]}},.1); is the same as: TweenMax.staggerTo(".bob",.5,{backgroundColor:"red", alternate:{backgroundColor:["green","blue"]}},.1); It basically just adds "red" to the alternate array. What is neat about this, is that you can basically get a rudimentary particle effect or at the very least more organic looking animation.

That makes sense... I forgot TweenLite doesn't have that. So what about TweenMax.to() can that point to TweenMax.staggerTo()?

What if a TweenLIte.to() with multiple targets just pointed to staggerTo()?

Ooh so much fun... here is one with other properties involved: https://dl.dropboxusercontent.com/u/1256960/%20Research/JS/TweenMaxAlternate/OtherProps.html

Oh man!!! This is fun! You can even apply alternate transformOrigins for zipper-like effects! Alternate Transform Origins!!!

I went ahead and modified TweenMax.staggerTo to allow for this for you guys to play around with: Modified StaggerTo Modified Source The new call is very simple: TweenMax.staggerTo(".bob",.5,{x:"+=200",opacity:0,alternate:{x:"-=200"}},.1); It's a very small line of code that I added to staggerTo(): copy[p]=vars.alternate?copy[p]=vars.alternate[p]?i%2==0?copy[p]:vars.alternate[p]:copy[p]:copy[p]; One outstanding thing, I would love to add this to TweenMax.to() as well but couldn't figure that one out. Also wasn't sure if there was a better way at ignoring custom properties.

There are often times where I'd like to alternate each line of text flying in. Or different objects flying in from different sides. Most of the time I have to get a list of the objects that I want to tween and then alternate the properties each time. Is there anything like that built into TweenMax? If not, it might be a pretty easy thing to add... I do these animations a lot. I wonder if others do to?

I have an SVG that has a ton of paths in it with various colors. I'd like to loop through all the paths and apply a brightness adjustment on the fill color. If I could convert the Hex to HSL, then I could tween the brightness separately. Obviously I can write a function to handle this, but it poses the question, is there something already available via TweenMax to do this? Side note, it would be really cool if there was something like this for colors: TweenMax.to(myObject,.5,{lightness:50}); Behind the scenes, Greensock would break the current color into HSL. Tween the lightness. then recombine it back.

What's the chances of getting something like this added?