roblevintennis

Yeah, I'm all in on that preset refactor OSUblake! Also, I liked the way you passed in an alternate ease from the master timeline calls too. The immediateRender stuff makes sense and Carl's video was crystal clear. I guess the thing I like about .from is it's fast use for a sort of "discovery" when you're designing the initial interaction. I could see a workflow like: Experiment using .from to "spike" on the idea Set a default ease if default easeOut doesn't suite Refactor redundant properties back in to that .preset method Pass in the second most used ease from master to nested timelines (like your example) I'm amazed at how much I've learned from one forum post...wow!

You know, as I reread your code and my last comment, it really seems like the best take away for me is that it's a best practice to favor .set and .to combination for this as opposed to .from, and accomplishes what I was after (presetting overridable properties) without any new methods to add. Thoughts?

OSUblake how do you at mention lol I'm lost! I do like the result of your refactor of my code. If I understand, the core to your trickery is the fact that, as Carl mentioned, once a particular element has been .set, it will retain those properties on subsequent use. Clever, and it does DRY up the code to look how I would have hoped. Seems like overriding dollar signs would, in long term be unfortunate since so many jquery users out there, but I assume that was more for demonstration purposes. Hrm, not sure how to keep it short and sweet though. Maybe if jQuery's on page, you could add it to it's proto, then usage like: var check = $(".checkmark").preset({ opacity: 0, scale: 0, transformOrigin: center }); But if jQuery's not you'd have to map $ to get query selector and build up it's prototype. Then do you make arrays presetArray? I dunno Definitely impressive idea either way OSUblake. It really does make my code much more tolerable so I'd think folks would like a way to achieve this.

Thanks for sharing the code your brother helped with. It might be interesting to post back exactly what was wrong, what you discovered, and how you and/or your brother fixed the problem. Forums are great places for keeping such stuff for later posterity

And fwiw, I DID go ahead and update my pen per both of your suggestions and it did DRY up the code quite a bit...thanks: http://codepen.io/roblevin/pen/qZQxJz

Thanks guys! >if you set transformOrigin to "center center" in one tween for your circle, you do not need to set it again on subsequent tweens of circle. Certainly useful and helpful to know. Thanks Carl! >TweenLite.defaultEase = Linear.easeNone; Right, I saw that. Seems odd that eases have that but not other properties. I'll close this solved as you guys gave me the 411, thanks! But here's what my "least surprised" expectation as a user would be–with absolutely no expectation that Greensock implements this–I definitely empathize with how much effort it'd take TweenLite.defaultEase = Linear.easeNone; // Most global. Least specific–overridable by all TweenLite(foo,1, {ease: Linear.easeOut}); // Overrides global. Less specific than tween methods to.to(foo,1, {ease: Linear.easeInOut}); // Overrides global and constructor Maybe something for a couple years out

Please note that I'm heavily editing my pen, so I just put some code below too. Sorry if this is a silly question, but is my assumption in the comments below correct? That I can set ```transformOrigin``` in the constructor as a default fallback property? Yes, I realize that it would be the normal way, but don't have time to set up a test and I'm being lazy hehe function targetReady() { var tl = new TimelineMax(); //If I pass a property to constructor like this origin: //var tl = new TimelineMax({transformOrigin: "center center"}); //Is my assumption correct that this will be an overridable default fallback, such that any .to, .from, etc., that supplies it's own will take precedent? Also, if it supplied a svgOrigin property...would that take precedence over transformOrigin set in the constructor? //Trying to "DRY up" this sort of redundant setting of transform origin: tl.addLabel('targetReady') .from(finger, .7, {opacity: 0, x: -400, ease: Linear.easeNone}, "targetReady-=.5") .from(circleStroke, .7, {opacity: 0, x: 400, ease: Linear.easeNone}, "targetReady-=.5") .to(finger, .1, {scale: .99, transformOrigin: "center center", ease: Linear.easeNone}, "targetReady+=.7") .to(circleStroke, .1, {scale: .98, y:1, transformOrigin: "center center", ease: Linear.easeNone}, "targetReady+=.7") .to(finger, .1, {scale: 1, transformOrigin: "center center", ease: Linear.easeNone}, "targetReady+=.85") .to(circleStroke, .1, {scale: 1, y: 0, transformOrigin: "center center", ease: Linear.easeNone}, "targetReady+=.85") .from(glass, 2, {opacity: 0, transformOrigin: "center center", ease: Linear.easeNone}, "targetReady+=2") .to(circle, 1, {scale: 30, opacity: 0, transformOrigin: "center center", ease: Linear.easeNone}, "targetReady+=1") .set(circle, {scale: 0, opacity:0, transformOrigin: "center center", ease: Linear.easeNone}, "targetReady+=2.2") .to(circle, .5, {scale: 1, opacity: .4, transformOrigin: "center center", ease: Power2.easeOut}, "targetReady+=2.4") .to(uxTest, 2, {opacity: 0, scale: 0, svgOrigin: "center center", ease: Linear.easeNone}, "targetReady+=3") .from(checkmark, 2.5, {opacity: 0, scale: 0, transformOrigin: "center center", ease: Back.easeOut.config(1.7)}, "targetReady+=4.5") return tl; }