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!