052 AiA Web-Based Animations with Jack Doyle of GreenSock
Check out RailsClips and RemoteConfs!
02:53 - Jack Doyle Introduction
03:53 - GSAP (GreenSock’s Animation Platform)
04:05 - GreenSock: The Name
05:01 - GreenSock: The Inception
09:13 - Transitions & CSS Animations
10:32 - Who is GreenSock aimed at? / What kind of applications use it?
15:01 - Lukas and GreenSock
16:50 - Angular + GreenSock + CSS Animations (GreenSock Under The Hood)
27:44 - Using GreenSock Outside of Angular
29:20 - Getting Started With Animations, Learning Curve
39:13 - When To Use Animations (User Experience)
- Microactions
- Using Animations to Help Workflow
46:09 - Material Design
49:11 - Licensing
51:24 - Mobile Apps
Picks
Take a vacation, and actually do the vacation! (John)GreenSock (Lukas)Microinteractions: Full Color Edition: Designing with Details by Dan Saffer (Lukas)Beautiful Outlaw: Experiencing the Playful, Disruptive, Extravagant Personality of Jesus by John Eldredge (Joe)GOG.com (Joe) Sleeping in a hammock (Ward)remoteconfs.com (Chuck) God (Chuck) Jesus Christ (Chuck)The Church of Jesus Christ of Latter-day Saints (Chuck)CodePen (Jack)Seth Godin's Blog (Jack)
Transcript
JACK: I'm glad this is audio only.[This episode is sponsored by Hired.com. Every week on Hired, they run an auction where over a thousand tech companies in San Francisco and New York and LA get on JavaScript developers providing to put the salary and equity upfront. The average JavaScript developer gets an average of 5-15 introductory offers and an average salary of over $130,000 a year. You just can either accept an offer and go right into interviewing with the company and neither with that any continuing obligations. It's totally free for users, and when you're hired, they'll also give you a $2,000 signing bonus as a "Thank You" for using them. But if you use the Adventures in Angular link, you'll get a $4,000 bonus instead. Finally, if you're not looking for a job but know someone who is, you can refer them to Hired to get a $1,337 bonus if they accept the job. Go sign up at Hired.com/AdventuresinAngular.]**[Does your team need to master AngularJS? Oasis Digital offers Angular Boot Camp, a three-day, in-person workshop class for individuals or teams. Bring us to your site or send developers to ours -- AngularBootCamp.com.]**[This episode is sponsored by Wijmo 5, a brand new generation of JavaScript Controls. A pretty amazing line of HTML5 and JavaScript products for enterprise application development. Wijmo 5 leverages ECMAScript 5 and each control ships with AngularJS directives. Check out the faster, lighter and more mobile Wijmo 5.]**[This episode is sponsored by Digital Ocean. Digital Ocean is the provider I use to host all of my creations. All the shows are hosted there, along with any other projects I come up with. Their user interface is simple and easy to use. Their support is excellent. And their VPSes are backed on solid-state drives and are fast and responsive. Check them out at DigitalOcean.com. If you use the code “angularadventures” you'll get a $10 credit!] **CHUCK: Hey, everybody! Welcome to Episode 52 of the Adventures in Angular podcast. This week on our panel, we have Lukas Reubbelke. LUKAS: Hello! CHUCK: Joe Eames. JOE: Hey, everybody! CHUCK: Ward Bell. WARD: Hello, hello! CHUCK: I'm Charles Maxwood from DevChat.tv. Before we introduce our guest, I have a couple of quick announcements. One is, I just launched RailsClips, which is a video series about Ruby on Rails. Half of the episodes would be free, the other half would be subscription. So, you can go check those out. Right now, I have a few episodes up, and there will be more every week. The second announcement is that I put up the talks for JS RemoteConf. I'm putting one out every week, it's on RSS feed. You can go check that out at RemoteConfs (with an "s" at the end) .com. And finally, I'm looking for companies that need help getting started or getting traction with Testing. So, if you know a company that uses Ruby on Rails and they're struggling with Testing, let me know. I'm looking for opportunities where I can actually come in in person and help them out. Our guest this week is, Jack Doyle! JACK: Hey, guys! It's an honor to be here. CHUCK: Do you want to introduce yourself? JACK: Sure! Jack Doyle with GreenSock. Basically, GreenSock makes tools that are for animating the web. We have a background on Flash, and I'm sure, on this show, that's probably like a boo moment if you can queue up the soundtrack. LUKAS: Boooo! JACK: [Laughs] No. But actually it was a great, great learning experience. I like Flash a lot, but these days, we've pretty much completely moved over to the open web and HTML 5, and JavaScript, and CSS, and I'm loving it! So GreenSock, we've made this suite of tools that hopefully makes your job easier when it comes to animating the web. CHUCK: So, this library used to be a Flash library and is now a JavaScript library? JACK: Exactly, yeah. Technically, we have both currently so there's an ECMAScript version and a JavaScript version. But of course, the JavaScript version is really where all the action is these days. CHUCK: I just want to clarify before we get started, I'm sure somebody's going say GSAP or G-S-A-P, that is GreenSock's animation platform. JACK: Exactly. Yup! CHUCK: So, we're talking about the same thing? WARD: I just want to know where the word "GreenSock" comes from. JACK: [Laughs] WARD: Why not RedSock? Or, BlueSock? JACK: Oh, gosh! That takes me back to... Every time I tell this story, it's slightly different and I always forget little details. But no, it basically comes down to when I started the company, it was way back when dinosaurs were roaming the earth and the internet was kind of beginning and we were helping clients to take a step into engaging the web, but we don't actually take the step for them, but we make it a lot more warm and cozy. So, we're more like a sock; we're not like a leg or a foot where we take the step forward the client. We made it easier for them and more comfortable. And, green is a color of growth and prosperity and that kind of fun stuff. That's the short version of the story. WARD: I get it! I get it! It's very meta. LUKAS: I just had a sad moment... JACK: [Laughs] LUKAS: Can we just [inaudible] on that for a moment? So, I've been using GreenSock for years. I think, yeah, since dinosaurs were roaming the earth. Could you give us the condensed version of how GreenSock just came to be? And then, just a little bit of commentary on the challenges of porting that from ECMAScript to JavaScript. JACK: Sure, yeah. Well, my backgrounds are all in design, believe it or not. I didn't take a single computer science class or anything like that. I worked at an ad agency. I'm going to fast forward for a lot of years of doing print-based stuff. But then, the internet happened so I started working with some bigger agencies doing banner ads and that kind of thing. And, there were no tools that I could find that would do what I needed them to do. When you're dealing with banner ads, I don't think anybody really likes banner ads, but they really drive a lot of the web and there are very strict files as requirements. And of course, performance is really important as well. So I just created this thing called "TweenLite" back in the day for my own projects for the ad agency I was working for. And I figured, maybe there are some other people out there that could use it so I tossed it out there on the web on just a terrible-looking blog-ish site, and it started to get traction and people started using it and likened it and they would request features and I'd baked them in and put it out there, and it just got a lot of traction. And then, there came a point where there were so many people using it, and either business critical application is depending on it, and it was taking more and more of my time. So I have to figure out, "How am I going to do this then? Am I going to work at the ad agency? Is that my primary thing and then I just do this on the side? If that's the case, then I only have a certain number of hours in a day that I can devote to this." So, I've seen a lot of open source projects out there that stagnate and died because the very thing that kills them can actually be their success because there are so many people that then start depending on it and asking for new features and that kind of stuff that the author gets overwhelmed and it's like, "Ah, I've got my day job and I got this thing, and it's growing into this big monster that I don't have time to maintain," so it gets stressful. I didn't want to really go down that path so I figured there's a fork in the road and I figured I got to figure out a way to make this a win-win. I don't want to leave my users out there hanging so I created GreenSock. You didn't really ask about the club start for the licensing stuff so I don't want to get too far into that. But that's where it came from and trying to make something that was protected from, at least my attempt at protecting it from some of the common killers of open source stuff. So I just took a step away from the ad agency and started doing the stuff full time. And, an animation engine is a bit of a unique beast in the open source world because it's not -- in a way, it's a one-trick pony -- but it's not really because there are so many things that you can animate and there's so many moving targets and features and things that people want that it's not just really a one off thing that you can put out there and everybody uses it. It's just, you don't really need to maintain it very much. There have been many years of research and fine-tuning this thing and listening to customers and hanging out in the forums, hearing what they want, and trying to build a new toolset, while at the same time, keeping it really fast and really lean. That's basically where GreenSock was born. It was this animation thing that I built for myself and just became something a lot of other people wanted to use and I kept building it up. CHUCK: I'm wondering a little bit, we have animations or transforms anyway in CSS. Did that put a dent in your business at all? Or, does this go way beyond that? JACK: First of all, we had the Flash thing first. CHUCK: Right. JACK: We didn't do anything with JavaScript for a long time so transitions and CSS animations pre-existed. When we jumped over to the JavaScript side of things, they were there already. In fact, I was excited. I read all these articles about how fast they were and being native in a browser and leveraging the power and speed of those or something that I definitely wanted to use to actually build GreenSock on top of. That was the first thing I tried to do, in fact. So it wasn't necessarily a competing thing. There are a lot of things in transitions and CSS animations that you couldn't really do so I figured GreenSock could supplement that and build on top of it. But, I ran into a lot of problems with that. So I quickly discovered that was pretty much impossible for me to have the kind of features that our audience really needs building on top of CSS transitions and animations. So that's why we went full on JavaScript direction. CHUCK: Yup. One other thing that I want to ask about before we get into how it works is, who is it really aimed at? Who are the people that are going to look at GreenSock and go, "Oh! I need this," as opposed to people who are going to go, "Oh, that's interesting, another animation library." JACK: That's a great question. There are really 2 types of users out there that I have seen. There are those that are doing UI animation where it's simple: make the button glow, or wiggle, or click on something and it slides over maybe, and that's the extent of what they're doing. I think, those people may look at GreenSock and scratch their head and go, "Well, okay, cool. It's yet another animation library," and it seems like there's one every few weeks that comes out so they might greet that with a yawn. But then, there are the guys and gals that really are the cutting edge of web technology and immersive interactions in websites. So, the things that Flash used to do, the people that were doing those in Flash, love our toolset. Lukas, it sounds like you're doing a lot that kind of stuff. LUKAS: Yup! JACK: Many of those people would come over and they would look at the technologies that were -- like the CSS transitions and CSS animations and JQuery animates -- and it was very frustrating for them. They felt like their wings were clipped and they couldn't do what they used to be able to do to create all this amazing immersive interaction in the browser. That's really the audience that tends to love what GreenSock offers. But then, I don't want to make it sound like that's the only people that this appeals to because part of what we're doing is, we're trying to solve real-world problems that actual animators have. There are browser inconsistencies, there are things like if you're trying to animate SVGs, transforms can be a major headache if you're tyring to rotate something or make it spin around at center or whatever. There are bunch of tasks that you might think you could just use CSS animations to do, but then you run into the fact that, "Oh, Firefox doesn't support that." I won't get into all the bugs, but there are a lot of them out there. With GreenSock, our goal was to make it just work. So, you can tell it to animate whatever you want, and we handle all of that. [Incomprehensible] underneath to sense when we have to do some fancy footwork to just deliver the experience that you're asking for without all the headaches. So, even if you're doing simpler stuff in a browser, it doesn't mean that GreenSock isn't for you bacause we still do solve all of those other problems. But the sweet spot that people tend to love us the most are the ones that are really highly building dynamic interactions in the browser. WARD: What kinds of applicatlions do those tend to be, Jack? JACK: Applications... I guess the... WARD: Was it a website's leverage? What kinds of things that people are doing where they can really benefit from the kinds of animations and visualizations that you're talking about? JACK: Well, there are various awards sites like the FWA Awards, sites like that, that are geared towards finding just the coolest websites out there and giving them awards. Last several years, the Site of the Year, they've used GreenSock to do their stuff. But, I don't want to paint this picture like it's only for people that are doing super high-end stuff with things flying over the screen and WebGL and that kind of stuff. There are plenty of people that are building apps that run on phones and games. Some of the biggest gaming companies use GreenSock for their interfaces, so gamers tend to really like GreenSock as well. So, it's a tough question for me to answer because I don't want to pitch in whole things too much... WARD: Sure! JACK: But again, the people are really pushing things and they need a toolset that is very flexible in performance, those are the people that appreciate GreenSock the most. WARD: So Lukas, how have you been using GreenSock? LUKAS: I was hoping you would ask that. [Laughter] LUKAS: I have actually a few post on my blog, onehungrymind.com, that actually leverages at GreenSock; some various photo albums, widgets, and some full page slide shows, and some different things. Where GreenSock is really, really handy is when you actually need to do dynamic animations based on the state of your application or the sequence or the type of interaction that a user has. For instance, if you're going through a slide show and either you are going to the previous slide or the next slide, you may want to animate that differently -- maybe from left to right, or right to left, or even up or down or vice versa. Using GreenSock, it's really easy to dynamically calculate those variables and then set that animation on its merry way to do that. So, I think Angular did a really good job of how they set up animations and how that it actually works and that it's just the first to however you want to do it. With that said, is I simply say, "Here's this event. Now, GreenSock go ahead and animate," and here's maybe some variables you actually need to do to actually calculate, for instance, your starting point and your end point at some really nice, even the full blown immersive web applications or websites like we used to do on Flash, but even just having menu come in really nice and clean and snappy from a certain way or whatever is really quite easy to do with GreenSock because you just delegate and then you can calculate your animations on the fly and go from there. WARD: So, how does that intersect to Angular? Do you tend to build these into your own custom directives that wrapper these? Or, do you just do it as needed in a certain places? How does Angular and GreenSock come together? JOE: I'd like to chip in right here. I have a fairly limited exposure to GreenSock and I know that the question was directed at Lukas, but as I have learned and figured out GreenSock versus just doing raw animations myself, what I felt was that GreenSock is basically JQuery for animations. I don't know, Jack, if you have an opinion on that label. JACK: In a way, it's flattering because JQuery -- everybody knows JQuery -- it's just a go-to tool in many people's toolset so that's great. I like it in that sense. I was cringed a little bit just because JQuery's animate is, you know, they're [incomprehensible]. [Laughter] JOE: Right. JACK: Less than stellar? JOE: Well, it's not just about the fact that everybody knows it. It's also the fact on it has a terrible API. It has improved, but mostly it's the cross-browser stuff. Still, the raw DOM API is rough. JQuery apps is awesome, easy-to-learn API, and it was really -- I would hardly argue with anybody who disagrees with me because I'm definitely right on every opinion that I have [chuckles]... LUKAS: Always... JOE: But it was JQuery that really enabled big WebApps... CHUCK: Yeah... JOE: When people started doing JavaScript, realized that it suck, and when frameworks like JQuery started coming out, people thought, "Hey, you actually can do cool things wth JavaScript." JACK: Yeah. And the other thing I love about that is that JQuery shields you from a lot of the inner workings and the hassles, the day-to-day stuff, where you just say, "Here's what I want," and then JQuery handles it, and it just works the way that you want it to work. JOE: Oh, my gosh! Can I please rant about animations in the browser? Like, I would lever a nice subscription, I want the differences between the transformation and animate, there's CSS transitions... LUKAS: JavaScript transitions... JOE: Yeah, then transitions... Like, there's 4 different kinds of things, and it's not obviously what's what, and it's so nice to have a wrapper over that that you don't have to understand all these detail and their workings unless you need to dig down and do something. But, man, it is so nice to use the stuff when you see GreenSock after you've seen the raw JavaScripts do the same thing, it's just great. WARD: So, Jack, do you like -- if you have some obstruction over particular animation -- do you look into the browser and say, "Hmm, it's this so I guess I have to fall back to this JavaScript thing, but oh, I could use CSS here," do you do that? You're making those kinds of decisions under the hood for me? JACK: Sort of, but we don't make the decision to use JavaScript or CSS animations. There are no CSS transitions or animations in GreenSock whatsoever because, at the very core, they're quite limited in some ways that would prevent them from working in GreenSock. For example, we have the ability for you to build out timelines. People often are familiar with Tweens where they're saying, "Okay, here's the start state, I want to tween the top from this value to that value," so that's a tween. But then, what happens if you want to have a lot of those, so tween the top and then I want to move it over to the left, and then I want to change the color, and I want this to happen, and maybe they're all overlapping in some ways, they don't start at the same time, but they're staggered. If you start building that stuff up, it gets quite cumbersome in other technologies. In GreenSock, we have a timeline that you can create and you can even nest the timelines within other timelines. So, it creates this nice little abstraction and then it allows you to modularize your code, your animation code. It's just so much easier to work with. If we try to that with CSS transitions and animations under the hood, they don't allow you to have it controls, for example. With GreenSock, you can jump to any point. Let's say you built a 10-second banner type story-telling animation, with all sorts of things happening, you can say, "I want to jump to exactly 5.3 seconds into that," and it renders it exactly the way that it should be at 5.3 seconds, that's not really possible to do. And to reverse things on the fly, let's say you've got something that has already played 5.3 seconds and then the user clicks a button and you want that to go backwards to where it came from, that's virtually impossible to do with CSS transitions and animations. So, we do, to answer your question. We do a lot of those kinds of decisions under the hood, but it's not whether or not to use CSS animations. It's more about, for example, if you're doing transforms, if you're rotating in SVG and it's in Internet Explorer, well, Internet Explorer does not recognize any kind of CSS properties, or transforms, at least, on SVG elements. So we have to, instead of applying it on the CSS layer, there's a transform attribute for SVG elements, so we'd apply it there. That's the stuff that we're doing under the hood that you don't have to worry about. You'd just say, "Rotate it to 35 degrees," and it just works. What we're implying, if you look under the hood in Chrome versus Internet Explorer, you might see it applied to the CSS in one and applied to the transform on the other, if that makes sense. WARD: That's what Joe is talking about. Oh, yeah, it does! Actually, at the detail level, it's like, "Ahh, run away! Run away! [Chuckles] I don't want to know! I've got other things I'm trying to do. I just want it to move." So I definitely hear what Joe was saying and what the value is there. The people pushed back and say, "Yeah, but can you use the GPU?" Or, is that one of those red herrings where people say that that's what they want, but they don't really know what they're asking for? JACK: No. I'm glad that you brought that up. It's a great question. I think, a lot of people wonder about that. It's a common misperception, actually. People assumed that only the native CSS transitions and animations can leverage the GPU, but that's not the case. In fact, we do that by default. If you animate the translation or the rotation or the scale using GreenSock, we automatically apply it on the 3D level. And when you do that, it will promote that element to its own GPU layer. And so, that's a browser level thing. But, the way that we apply the values tells the browser, "Hey, this thing should get its own GPU layer so that then it performs much better especially on mobile devices." Earlier, you asked why would somebody use GSAP in Angular, and that's one of the benefits; it's that you just automatically get the GPU promotion, the layer promotion, whenever you animate transforms with GSAP. WARD: That's good news! Actually, my question was about the Angular intesection, but somewhat different. I was trying to understand how, when you're writing an Angular app, you would say, "And now is the moment in which I turn the wheel over to GreenSock!" I was wondering how, as an Angular developer, where that takes place? LUKAS: I can answer that. WARD: And that's what I was hoping, somebody will do. LUKAS: Let me answer that. With Angular, you have the ngAnimate module which then you get a convenience method on your actual module instance that is .animation. From there, you will give your animation that you'll defining a name. So, it's all CSS class based. If you're doing JavaScript or CSS, it will still be this dot and a class name notation. But from there, then you define essentially the event hooks that you want to animate on. For instance, you might have an add class and a remove class, and then you can define an animation for each one of those events. So when a class gets added to an element, then ngAnimate would pick that up, so essentialyl it's a class-based directive and say, "Hey, this thing is fired, here's your element that we're going to animate on, here's the class name that was added, and then a done callback." From here, then using element, I can actually have access to the scope doing element at scope and calling that scope, for instance, you're calling the scope method, to get that instance. And then from there, you can say, "What is the state of the scope?" So, I might say, if I set a direction property on that scope right or left or whatever, I can make some calculations and then I can call, for instance, TweenMax and say, "TweenMax.2" and then I'll pass in the element that was provided by ngAnimate in the add class event and I could say, "Animate this element (let's say) for half a second, and then here is my animation configuration object." So, I might say, "Go left by 500 pixels, and then on complete, execute this done callback to let Angular know that its animation has completed." WARD: Okay, so if I were to try and boil it down, let me play it back to you, my gateway to this, my Angular gateway to this is ngAnimate. LUKAS: Uhmm-hmm... WARD: And then I take advantage of some event hooks inside ngAnimate, express my intention, and then delegate that on to a GreenSock component. LUKAS: Yup. That is actually how animations work in Angular across the board so I personally prefer GreenSock. So, most of my animations are in their JavaScript using GreenSock. But, for instance, Matias, who wrote ngAnimate, he's more fond of CSS animations so he will simply, once the event is fired, then he'll defer to something like animate.css. To summarize, animations in Angular using ngAnimate is nothing more than a set of events that you can then hook into and you defer the entire animation to whatever you want to use it. Once that event has been fired, then it's like, "Hey, this thing happens, this method get's called," and within that, then you can, for instance, you can do TweenMax and say, "Animate this element into these things," whether it's left to right, fade in like a 3D transform, or whatever you can imagine, you can accomplish within that event handler. WARD: Got it. Now, Jack, is that approach how people do it when they're not using Angular? I mean, if they're using some other thing like, I don't know, React or something, is that same pattern you're looking for whatever UI framework is to have in animation moment to hook and then they start invoking GreenSock? Or, there's some other way which GreenSock is used more widely? JACK: Well, GreenSock really, we try to take our hands off approach. You build your stuff however you want to build your stuff. GreenSock, it just owns the animation layer there so you can sprinkle it on top of really anything. At its core, any animation is simply changing values hopefully 60 times per second, and that's it. It doesn't matter if it's the CSS property top or left or whatever. GreenSock doesn't have some free to find list of "here are the allowable things you can animate". You just point it at an object and you tell it what property you want it to animate and it will do it. It can even be a custom JavaScript object with a custom named property. It could care less. If it's React, if it's Angular, if it's right in the DOM, it doesn't really matter. As far as where you put your logic for React versus Angular versus some other options, GreenSock doesn't really care. You can write whatever you want. WARD: Got it. So, supposed your an animation noob and you're just afraid of this whole thing, because that pretty much describes me... Chuck, are you with me on this? JACK: [Laughs] CHUCK: Yeah. WARD: It's like, "Okay, well, mostly, what I'm doing is I'm just taking the stuff to screen and put that on the screen and it looks jerky, and I wish it was better, but..." So, I want to get in but I want to get into the water without drowning. What's my path like? JACK: It's a great question. There are a lot of learning resources out there. I'd say, probably the best place to start is just the Getting Started page on our website that has a video right at the top. You can sit there and watch the video and it outlines the basics of how to get up and running. And then, there's an ebook that just came out about GSAP, there are classes you can go to, Petr Tichy is putting out a whole new course very soon. There are a lot of resources out there. Sarah Drasner has been writing quite a bit about GreenSock. Hopefully, it's not too terribly difficult to get up and running, but there is a little bit of a learning curve. But what we typically hear is that there's this moment at which you spend a little bit of time with it and then you're like, "Oh, my gosh! [Incomprehensible]," and it's like, "Oh, this all makes sense now." I don't know, Lukas, if you could speak to that much with your own experience, but we hear that relatively often because it's a little bit of different mindset than somebody who is coming from a CSS animations or CSS transitions background, which I assume you might be a little bit more familiar with. But, once you get it... WARD: I'm terrified of the whole freaking... JACK: [Laughs] WARD: I just want to program and I just wish... CHUCK: [Laughs] WARD: I wish my thing look better. It's shameful to admit it, I think I have company. LUKAS: Ugh... CHUCK: [Laughs] JOE: It's true, Ward. JACK: For sure. CHUCK: Yeah, I'm a total animation noob so I'm with you there, Ward. LUKAS: But I think that most of us can reason about I have this element and I wanted to start here and I wanted to end here. In that sense, I have found the TweenMax, TweenLite APIs to be really easy. So, for instance you have a to-method, you can say, "I want to take this element and I want to move it here," and then you simply define the values for the properties you want to animate within this object and you're good to go. Or, you can even do to-from, I believe, where you say, "start here, and then end here," so when you start to look at your animations, it's purely, here's my starting data structure or these are properties and values I wanted to have or that they currently have, and then this is the data structure that I wanted to end up. For instance, you're saying, "property alpha=0 going alpha to 1" that's just simply setting a property on a data structure which happens to represent something visually on the page. For me, that's why I generally prefer programatic animation over like CSS, Stylus-stick animation, and going in that avenue because I do understand if I have a data structure with properties and I just changed these properties to equals something else, then I get this transformation from this point A to point B, and I think, anybody has ever written any kind of software can understand that paradigm and then just apply it to something that has a visual representation within the page. WARD: Yeah, I think I can manage that. CHUCK: [Chuckles] Yeah. It's like graphing the -- in my mind, anyway, I see this graph where I want its orientation or its precision or its transparency or whatever to change over time. And the way that the CSS does it has been somewhat counter intuitive to me. So, being able to basically set the [incomprehensible] and tell it to behave at specific way, that really makes a lot more sense to me, from a programmer stand point, because basically what I'm doing then is I'm telling it, "This is the act I should care about and here's the formula for it." LUKAS and JACK: Exactly. JACK: And, its core animation is really just a thing with its properties and you want to change it over time so you give it a duration and the end values, and you let it rip. And if you want to customize that, you can change the easing so the style at which it moves, if you want to ease out or ease in, there's elastic things which can be really nice if you're making something move from one place to another and it wiggles back and forth at the final duration or the final destination. WARD: Or, the cubic zirconium. JACK: [Chuckles] Yeah. LUKAS: Well, that's actually a tweening equation. WARD: I just call it cubic zirconium because I don't know what the heck you're talking about... JACK: [Laughs] WARD: But, it makes me sound smart, and I can get that on the QBC Network... CHUCK: [Laughs] WARD: Alright, I have a fun question for you, which is: Give me some of your favorite animation atrocities. JACK: Atrocities. Oh... WARD: Yeah! [Laughs] The equivalent of <blink> tag. JACK: It's painful, yeah. I think we've all seen things like that where you show up at a website. One of my pet peeves is just when things take way too long. I don't mean loading time, I mean, it's like if you've given artist a set of pains to create a masterpiece, if you give that same set of pains to a 4-year old, you're going to get something very different. Sometimes, people go a little nuts with colors and painting and they go a little nuts with animations where, "Hey, I really love this thing spinning so I'll make it spin for 4 seconds before it finally comes to a stop..." WARD: Right... JACK: And it can actually get to do what I'm trying to do. I came to this website to do something, and it's like when animation gets in the way, that drives me nuts. WARD: Right... JACK: They should be there to help you move the experience forward and make it more intuitive and not get in your way. But I see animations get in the way all the time. WARD: Yeah, they were really cool when you first looked at them. But after you've seen it 6 times, l've had enough already! I just would like to get there. JACK: Exactly, exactly. And by the way, that reminds me of something that, workflow wise, I don't think it's enough attention, which is if you're building an animation that takes a little while and -- Lukas, maybe, you've done this, I'm not sure, many others have -- but let's say you've got a 10-second animation and you're building that out and... Let's make it even worst. Let's say a 60-second animation, and you've tweak it all the way up until that last, you're finishing that final 10-seconds, and then you have to go back, you tweak some code and then you go back to the browser and you refresh and you have to sit there through the first 50-seconds, which you've already looked at a hundred times before just so that you can get to that final 10-seconds to see, "Oh, do I need to tweak the timing a little bit or the easing?" With GreenSock, it's super easy to just add one little line of code to say, "Jump to 50-seconds into this animation," so that every time you refresh the page, that's all you have to see. And, it makes producing those animations a heck of a lot easier for you when you're building them. And then you just remove that line of code when you're done, let it rip, and you're done. WARD: Actually, I just imagine that as being useful in the production environment where you needed a slow move in the beginning just to get the user oriented, but then you could crisp things up from that point forward because they already had had that mental transition and now they don't need that animation to go on or any some other sets of animations to go on so long. And I imagine you could tweak that on the fly, yeah? JACK: Yeah, for sure. And there's a time scale, a thing that you can apply to any tween, any timeline, really anything in GreenSock. So, you built out this animation and you say, "I want that thing to play at twice the normal speed," or half the normal speed or whatever you want, and you can even do a global time scale which can be quite useful if, for example, we got a question to forums the other from somebody who said, "I want my IE 8 users to not really see animations. I want things just to happen immediately because that browser is so terrible," for whatever reason, they just wanted to make the animation go away. And if you set the time scale to a crazy high amount, that's really all you have to do, that's like one line of code. You could sense if it's IE 8 and then say, "I want the time scale to be a hundred," so that then you don't really have to change any of the other code, it just makes things look almost instantaneous and vice versa. If you're tweaking things and you want to really zoom in on something in particular and you wanted to run it a tenth of the speed, again, just during production, that's super easy to do. And, I think animation is one of those things where it's very experimental. You have to play with it. You never know what feel is it going to be at .5 second tween or .3 second tween. It might sound silly, but in the hands of an animator, that's a huge, huge deal. And to be able to play with it and watch it and say "You know what, that's little too fast, or it's a little too slow, I need a different ease on that," experimenting is so critical. So, we try to make the tools so that it's easy to do that. CHUCK: I'm wondering -- you mentioned that animations can help move the experience forward, and some of the things seem somewhat obvious to me, I have something slide in or slide out. But, are there other areas of your application that you should be looking at or things that may trigger you to think, "Oh, yeah, I definitely need to be adding an animation here." Or, I should at least be thinking about adding an animation to this part of my application? JACK: I would say that... gosh! There's probably a list of them. This isn't necessarily my area of expertise, but I would say intuitively, things where you need to draw attention or when you're changing state somehow to give the user a little clue about that, so sliding something over to the next screen or if there's an error. Let's say, they click the submit button and there's an error, if you animate the change of the button color or wiggles a little bit or something like that, you can sense put a timer on things so if somebody's taking a really long time and you're wanting to move them forward in the process, maybe the submit button will give a little wiggle once in a while just to queue the user that, "Hey, this thing over here is where you should be looking next." I think it can be a nice effect that helps move things forward instead of just being animation for the sake of animation and impressing everybody. CHUCK: Well, that add glitter for Ward. [Laughter] JACK: I'm working on that. That's a new plugin. CHUCK: Oh, okay. JOHN: So [incomprehensible] animation is complete, unless you have audio and the animations is in there, too. That's what Ward really wants [laughs]. CHUCK: [Chuckles] Yeah, there you go. WARD: You guys are terrible. CHUCK: [Laughs] LUKAS: Yup. If I could jump in here real quick... Sorry, I don't mean to [incomprehensible] here, but I think it's really important to call this out. In the Flash world, and you still have this in JavaScript, you got this full-page immersive websites, and I think those are amazing and when done right, I think it's a great investment for somebody to go and produce those things, and are really great. But where animations are also really important is in the scope of microinteractions. It's like what Jack said that when you are giving subtle queues to the user, then doing that in a way that I think conveys personality. So, showing them on air, not just having it like show up, but actually fade in a little bit is, it will affect how actually a person responds to that. A good friend of mine, Shane Mielke, who I've had the privelege working on a lot of award-winning sites over the last, I think, proabably 10 years is when he approaches animations is he tries to imagine the animation having a personality. So, when you're having a conversation essentially with an application is, how would that application, if it were a person, respond to the user. So, it's not going to say, "Hey, you did this thing wrong!" and you scream at it. CHUCK: Lots of red! LUKAS: Lots of red! CHUCK: [Chuckles] LUKAS: But when you can actually use animations to convey this in a way that is almost in a conversational tone like something fades in very nice and pleasant like, "Hey, you forgot this thing," or, "Is this queue here?" or, even the way you typed something in and something is just updating in real-time, but it's animating as you go along and guiding the user along this experience is, it almost your giving your application a personality. Microinteractions are very, very important to really nailing down especially on an application level. And, it's an opportunity to (1) increase the user experience, but when things appear to work better, in their minds, the user's mind, it simply does. So, there's a whole UX discussion on that, but microinteractions is a massive opportunity to start applying animations and increase the experience for your users. JACK: Yeah, I couldn't agree more. LUKAS: Anyways, Ward, you were saying? Carry on, my friend. WARD: I was thinking about that moving things on. One of the things that we all hate are, you press Save and then that comes in alert box that says, "Did you mean to Save?" and it's like, "Yeah, of course. That's why I pressed the Save button." That's what we're trying to get rid of some of these models, and now we go to auto-saving in, and now we've gone so much to moving them that we don't really have the comforting confirmation that something good happened like it actually did auto-save. Or, do something in the background that I like to know. I don't want you to interact my flow, and so I was just thinking what Jack was talking about that the subtle kind of animation opportunities there, and I think it ties with what you're talking about, Lukas, also that microinteraction thing is just you're getting that nudge that over time make you feel that things are good. And then, if things aren't good, then you'll notice that they're missing and you wonder why and then you'll go find out why. That kind of thing. It sounds pretty subtle. I'd love to have a bag of these tricks around that I could know about and use. Are those around? JACK: Ward, if I can interrupt just a quick sec, I think what you're getting at is somewhat arousing to ask and that's, a lot of times, people don't really know what animations to use, when and where to help the workflow. WARD: That's it, John. Why didn't you just say that the first time? [Laughter] JOHN: That's good. They don't know what they don't know! Is there anything besides a list of, "Here is the entrance animation, the zoom animation, the bounce animation"? Is there any recommendations of, "Here's how you can make your workflow easier if you use this in this situation, so on and so forth"? JACK: That sounds like a lot of the Google's attempt at the material design, which is like an animation language of sorts, Visual language. I think that's a great idea to have that in your projects where it's like, Here's the style we're going for. Here's the personality of our app. How does that affect our submit buttons? How does that affect when mode or windows pop-up or don't pop-up? Or, alerts, how should we handle that? How should things that animate in? And, it would be critical to have that. Be very consistent across the board in your application. So, as far as their being things you can just sprinkle in, we don't necessarily have things like that that are prebate. But I have heard of other things out there. In fact, I believe in this podcast, there was a mention of a library out there. Lukas, I think it was you who mentioned it at one point, where there's some canned effects that leverage GSAP. LUKAS: That's ngFX by my bff, Scott Moss. JACK: There you go. LUKAS: And I will paste the link in here and we'll put this in the podcast notes. JOHN: You mentioned material design, which I think it's interesting. And just to be clear, there's Material Design, and then there's also Angular Material Design. Material Design, as I understand it, is basically a set of guidelines and principles on how to do this kinds of animations. Do I have that correct? JACK: I think so. I'm no expert on that so I don't want to... like I am. But, that's my understanding as well, yes. JOHN: I'm looking at the site, and it does. It's more of the design side of things. What is motion mean? What is bold and graphic mean? Kind of have that all works. I think that's interesting. And just to throw another side of that is, Angular Material Design, as I understand it, is basically nepomutation of Material Design for Angular. Where does that fit in with what you guys are doing at GreenSock? JACK: Well, I would say that GreenSock is an engine that could drive the actual implementation of whatever you decide your animation should look like. So at some point, you might say, "Our button should animate to be green when this happens and then we go when that happens and then whatever," or, "e want this transition to happen in between states, what point you have to build that?" Is it going to be CSS animations? CSS transitions? Are you going to use GSAP? What are you going to use to do it? GreenSock would be a tool that you could use to make those things happen in the browser. JOHN: My last question for you is, if somebody on the team is looking at building an application and wants to use animations properly, where would you point them? Would you point them at Material Design, assuming it's Angular, Materials Design with Angular? At GreenSock? Is there a website? What's the one-stop shop that you would send people to go first? JACK: Well, it depends on what you mean by "done properly" because I'm more of a technician and my brain immediately goes to properly implemented so that it works across the board in all browsers. But some people might mean "done properly" in the sense that design-wise, it makes sense. JOHN: Yeah, that involve performance-wise and user experience design wise. JACK: Yeah. I don't know! Nothing is coming to the top of my head right now for a go-to resource for that type of things. Anybody else on the show have an idea? JOHN: No, that's why I asked. [Laughter] JOHN: I was hoping you knew [laughs]. JACK: I wish. I wish there was out there. I'm not aware of anything exactly like that. JOHN: That's called opportunity right there [laughs]. JACK: Yeah [chuckles]. JOHN: Because I think that's a lot of people lack. I think they focus on one or the other. Like, I have teams that work on creative design, and they built the right design, but then actually implementing that sometimes is difficult. And then I've got teams who do the technical of the animations, and sometimes, it's not the design that the creative teams want. CHUCK: [Chuckles] JOHN: So, marrying those 2 together is often more difficult than I have hoped it would be. JACK: Yup, I hear you. You defined that unicorn out there that's the hybrid of the perfect designer... CHUCK: [Laughs] JACK: and he's got the technical chops to do all the stuff. JOHN: The Green Unicorn. Here you go [incomprehensible]. JACK: That's right [laughs]. CHUCK: That's right. I'm a little curious. I've been poking around your website, and there's this "No Charge GreenSock License"... JACK: Uhmm-hmm... CHUCK: Do you want to talk a little bit about licensing? JACK: Sure. This is something that we're going to be writing about soon. There's the No Charge license, which is one of the goals of the project was to have it be very accessible. We don't want to erect these barriers so that -- many people think in terms of "am I using this for personal use or commercial use" because many licenses that are out there will allow you to do it for free if it's only for personal use. But then, as soon as you make any money off of it, then you have to get the commercial license, and that's not how GreenSock works. The No Charge license applies to even commercial projects where you charge one company or individual. Let's say that Nike hires you to build the next nike.com and they pay you some crazy some of money, you get a million dollars for building this website and you use GreenSock all over the place, that's fine. The No Charge license applies there. But we also, like I said earlier, we wanted to protect, we wanted to have some kind of funding mechanism that would protect it from the vulnerabilities of open source, of many open source projects. So, we did that by having a commercial license for a very particular type of use where you're using it and you're charging end-user, multiple end-users, for the use of your app or game or site or whatever. So, think about a game in the AppStore that would be something that you need their commercial license for, we tied that in with our Club GreenSock. There's 3 different levels: there's SimplyGreen, ShockinglyGreen, and BusinessGreen. You'll see different prices, but the BusinessGreen one comes with not only a bunch of extra plugins that allow you to do some fancy stuff, but also the commercial license so that you can use it in those games and apps that you're charging multiple end-users for. CHUCK: The other question I have, and this harks way back but you brought it up again, you mentioned mobile apps. Can you use GreenSock in like ionic or other hybrid mobile apps? JACK: Anything that JavaScript is involved with, you can use GreenSock. I know that there are plenty of people that use it in apps that are compiled down like Cordova and other ones out there that will ultimately spit out native applicatlion, and they use GreenSock in that. So, as long as JavaScipt lives there, GreenSock should be able to be just fine. CHUCK: Alright, well, unless there's anything else, we'll go ahead and get to the picks. John, do you want to start this off with picks? JOHN: Sure! I have a completely non-technical pick because I just got back from a 2-week vacation where I never touched my laptop. My pick is, man, you all should do that at some point. Take a vacation, go with your family, put down the computers, don't think about Angular, Adventures in Angular, GreenSock, or Ward Bell's outfits. LUKAS: Impossible. JOHN: [Chuckles] Just take your time and chill out. [Laughter] LUKAS: What are you talking about? JOHN: I'm so refreshed at this point. It's the best thing I've done all year. So, definitely, take a vacation and actually do the vacation. Wonderful. CHUCK: Alright. Lukas, do you have some picks for us? LUKAS: I have 2 picks. The first one is going to seem a bit obvious, but it's "GreenSock Animation Platform". I love it. I'm a huge fan. I've written about it a ton. I've got videos. GreenSock.com, if you haven't tried it, give it a spin, literally. My second pick is the book, "Microinteractions" by Dan Saffer, I believe that's how you pronounce it. It's a really, really great book about microinteractions, and it's full color and very informative about how you can start to integrate these feedback mechanisms into your application. CHUCK: Very cool. Joe, do you have some picks for us? JOE: You bet! My first pick is a book, it's called "Beautiful Outlaw". The book is about Christ, and it's a book about the fact that He had a personality and analyzing what that personality was like and he's talking about that through scriptural evidence. So, if you happen to be interested in that subject, I found it to be very interesting, and presenting Him as a more approachable figure rather than some very distant unknowable, incomprehensible thing. So, I really enjoyed that book. I'm in the middle of reading it. I greatly enjoyed what I've read so far. My other pick is going to be "GOG.com". I'm not really sure what it stands for, if it stands for anything. Anyway, it's a website... CHUCK: Good Old Games. JOE: Good Old Games? Ah! Thank you! I recently picked up a couple of games that I just absolutely love from decades past. Star Wars Rebellion, one of my favorite real-time strategy games of all time, and Wasteland 1, which is way, way back. I was playing that just because it came out recently and I was thinking about it, and I wanted to play it. It's just great because you can play those really old games on a mono computer, and they're super cheap. So, GOG.com, that's my other pick! CHUCK: Alright, Ward, do you have some picks for us? WARD: Well, I didn't get ready with those because, as John suggested, I took a micro-vacation, which means that I just ran in the door after coming off the mountain trying out a hammock, sleeping in a hammock. Hey! There! Maybe, that's my pick. If you're an outdoor type and you haven't slept in a hammock, check it out! CHUCK: [Laughs] Awesome. I've got a couple of picks myself. I think I mentioned at the top of the show the RemoteConfs.com. So, if you want to get talks from the Remote Conferences, you want to be on RSS feed, go check it out, RemoteConfs.com. It's funny that Joe picked what he picked because I was going to pick God because I feel that He's pretty molded my life, and I have to give Him a lot of credit for what I feel like I've been able to accomplish. And I think, He's pretty awesome. He sent His son, Jesus Christ, and I'm going to pick Jesus as well. If you want to find out more about what my beliefs are and about the church that I belong to, you can go to "lds.org", and check it all out. You can also get more information. You can have the missionaries come visit you. You can get a book of Mormon there for free. All kinds of good stuff. Anyway, go check that out. CHUCK: Jack, what are your picks? JACK: Well, that's to follow. I'm a huge Christ fan myself. So, my picks, I guess I'll make Jesus my number one pick, but what I have written down here was "CodePen" actually. We use CodePen all the time. Chris Coyier is involved in that, and his team is awesome. In the forums, we're just using it constantly. It's a great tool. Love it. Try it out if you haven't. And then, the second one that I had here is "Seth Godin", pretty much anything he writes. I just find him pretty inspiring. He talks about getting your art out there in the world and not obssessing about it being perfect. A lot of people hide behind the fact that, "Hey, you know, this thing isn't perfectly polished, and there will be some haters out there, so I want to protect myself from being hated," and he just pushes you. He's got a daily blog. I find myself consistently challenged and inspired where he's like, "You know what, your stuff, your art is not going to be for everybody, and that's okay. Don't use that as an excuse and put it out there anyway because the world needs it." JOE: I totally want to second that pick because that's awesome. JACK: Yeah. CHUCK: Yeah, I love his stuff. Alright, well, if people want to find out more about you or about GreenSock, or animations, or anything like that, where should they go? What should they do? JACK: Just check out GreenSock.com and Twitter @greensock, and there's tons of resources that are linked on our site there. So, just GreenSock.com! CHUCK: Awesome. Alright, well, I think we're done. Thank you for coming! JACK: I appreciate it, guys. It's been an honor! LUKAS: Hurray![This episode is sponsored by Mad Glory. You’ve been building software for a long time and sometimes it gets a little overwhelming; work piles up, hiring sucks, and it's hard to get projects out the door. Check out Mad Glory. They are a small shop with experience shipping big products. They're smart, dedicated, will augment your team, and work as hard as you do. Find them online at madglory.com or on Twitter at @madglory.]**[Hosting and bandwidth provided by The Blue Box Group. Check them out at bluebox.net]**[Bandwidth for this segment is provided by Cache Fly, the world’s fastest CDN. Deliver your content fast with Cache Fly. Visit cachefly.com to learn more.]**[Do you wanna have conversations with the Adventures in Angular crew and their guests? Do you wanna support the show? Now you can. Go to adventuresinangular.com/forum and sign up today!] **
