{"@attributes":{"version":"2.0"},"channel":{"title":"Blogs","link":"https:\/\/gsap.com\/community\/rss\/1-blogs.xml\/","description":"RSS feed of all blog posts","language":"en","item":[{"title":"WAAPI-Powered GSAP? Unlikely.","link":"https:\/\/gsap.com\/community\/waapi\/","description":{},"enclosure":{"@attributes":{"url":"https:\/\/gsap.com\/community\/uploads\/monthly_2017_10\/767636160_201710gsap-waapi.gif.eca7b2feff0db56b6d4f450ea8a28aa8.gif","length":"9662","type":"image\/gif"}},"pubDate":"Thu, 19 Oct 2017 05:47:00 +0000"},{"title":"GSAP 1.20.0 Released","link":"https:\/\/gsap.com\/community\/1-20-0\/","description":"Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. \n\n\tHere are some of the highlights of the GSAP 1.20.0 release...\n \n\n\n\tyoyoEase\n\n\n\n\tNow you can specify an ease for the yoyo (backwards) portion of a repeating TweenMax animation. Set it to a specific ease like yoyoEase:Power2.easeOut or to flip the existing ease, use the shortcut yoyoEase:true.\n \n\n\n\t\n\n\n\n\tTweenMax is smart enough to automatically set yoyo:true if you define a yoyoEase, so there's less code for you to write. Score!\n \n\n\n\tAnimate CSS Variables (custom properties)\n\n\n\n\t\n\n\n\n\t\n\t\tSee the Pen CSS Variables Demo by GreenSock (@GreenSock) on CodePen.\n\t \n\n\n\n\n\tEmoji support in TextPlugin\n\n\n\n\t'Nuf said.\n \n\n\n\t...and more\n\n\n\n\tThere are quite a few little improvements and bug fixes as well, which are listed in the changelog at the github repository. Download GSAP today. Happy tweening!","enclosure":{"@attributes":{"url":"https:\/\/gsap.com\/community\/uploads\/monthly_2017_06\/160326560_201706gsap-1-20-0-thumb.gif.f386cf35d855396f7e80c065bc245c7b.gif","length":"16640","type":"image\/gif"}},"pubDate":"Wed, 28 Jun 2017 16:39:00 +0000"},{"title":"Club GreenSock Updates, Q1 2017","link":"https:\/\/gsap.com\/community\/club-updates\/","description":{},"enclosure":{"@attributes":{"url":"https:\/\/gsap.com\/community\/uploads\/monthly_2017_01\/196884209_201612club-updates-thumb.jpg.0b7c78c64b82637172029bd357025a20.jpg","length":"34454","type":"image\/jpeg"}},"pubDate":"Tue, 17 Jan 2017 19:21:34 +0000"},{"title":"Introducing CustomWiggle and CustomBounce","link":"https:\/\/gsap.com\/community\/wiggle-bounce\/","description":"Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. \n\n\tHave you ever tried getting a realistic wiggle effect or tweaking just how bouncy an ease is? What about adding squash and stretch to a bounce? These are not easy tasks. Well, until now. Even though CustomEase, lets you create literally any easing effect that you can imagine (bounces, wiggles, elastic effects, whatever) by drawing them, it's difficult to plot a complex wiggle or bounce while making sure all the points are spaced correctly. Wouldn't it be nice if you could just set a few parameters (like number of wiggles or bounciness) and have that complex easing curve created for you? Wish granted.\n \n\n\n\t\n\n\n\n\tCustomWiggle\n\n\n\n\tCustomWiggle extends CustomEase (think of it like a wrapper that creates a CustomEase under the hood based on the variables you pass in), allowing you to not only set the number of wiggles, but also the type of wiggle (there are 5 types; see demo below). Advanced users can even alter the plotting of the wiggle curves along either axis using amplitudeEase and timingEase special properties (see the docs for details).\n \n\n\n\t\n\n\n\n\tDemo: CustomWiggle Types\n\n\n\n\t\n\t\tSee the Pen CustomWiggle Demo : resized by GreenSock (@GreenSock) on CodePen.\n\t \n\n\n\n\n\tOptions\n\n\n\n\t\n\t\twiggles (Integer) - number of oscillations back and forth. Default: 10\n\t\n\t\n\t\ttype (String) \"easeOut\" | \"easeInOut\" | \"anticipate\" | \"uniform\" | \"random\" - the type (or style) of wiggle (see demo above). Default: \"easeOut\"\n\t\n\t\n\t\tamplitudeEase (Ease) - provides advanced control over the shape of the amplitude (y-axis in the ease visualizer). You define an ease that controls the amplitude's progress from 1 toward 0 over the course of the tween. Defining an amplitudeEase (or timingEase) will override the \"type\" (think of the 5 \"types\" as convenient presets for amplitudeEase and timingEase combinations). See the example codepen to play around and visualize how it works.\n\t\n\t\n\t\ttimingEase (Ease) - provides advanced control over how the waves are plotted over time (x-axis in the ease visualizer). Defining an timingEase (or amplitudeEase) will override the \"type\" (think of the 5 \"types\" as convenient presets for amplitudeEase and timingEase combinations). See the example codepen to play around and visualize how it works.\n\t\n\n\n\n\tHow do you control the strength of the wiggle (or how far it goes)? Simply by setting the tween property values themselves. For example, a wiggle to rotation:30 would be stronger than rotation:10. Remember, an ease just controls the ratio of movement toward whatever value you supply for each property in your tween.\n \n\n\n\tSample code\n\n\n\n\/\/Create a wiggle with 6 oscillations (default type:\"easeOut\")\nCustomWiggle.create(\"myWiggle\", {wiggles:6});\n\/\/now use it in an ease. \"rotation\" will wiggle to 30 and back just as much in the opposite direction, ending where it began. \nTweenMax.to(\".class\", 2, {rotation:30, ease:\"myWiggle\"});\n\n\/\/Create a 10-wiggle anticipation ease:\nCustomWiggle.create(\"funWiggle\", {wiggles:10, type:\"anticipate\"});\nTweenMax.to(\".class\", 2, {rotation:30, ease:\"funWiggle\"}); \n\n\n\tWiggling isn't just for \"rotation\"; you can use it for any property. For example, you could create a swarm effect by using just 2 randomized wiggle tweens on \"x\" and \"y\", as demonstrated here.\n \n\n\n\tCustomBounce\n\n\n\n\tGSAP always had the tried-and-true Bounce.easeOut, but there was no way to customize how \"bouncy\" it was, nor could you get a synchronized squash and stretch effect during the bounce because:\n \n\n\n\t\n\t\tThe \"bounce\" ease needs to stick to the ground momentarily at the point of the bounce while the squashing occurs. Bounce.easeOut offers no such customization.\n\t\n\t\n\t\tThere was no way to create the corresponding [synchronized] scaleX\/scaleY ease for the squashing\/stretching. CustomEase solves this now, but it'd still be very difficult to manually draw that ease with all the points lined up in the right spots to match up with the bounces.\n\t\n\n\n\n\tWith CustomBounce, you can set a few parameters and it'll create BOTH CustomEases for you (one for the bounce, and one [optionally] for the squash\/stretch). Again, think of CustomBounce like a wrapper that creates a CustomEase under the hood based on the variables you pass in.\n \n\n\n\t\n\n\n\n\tOptions\n\n\n\n\t\n\t\tstrength (Number) - a number between 0 and 1 that determines how \"bouncy\" the ease is, so 0.9 will have a lot more bounces than 0.3. Default: 0.7\n\t\n\t\n\t\tendAtStart (Boolean) - if true, the ease will end back where it started, allowing you to get an effect like an object sitting on the ground, leaping into the air, and bouncing back down to a stop. Default: false\n\t\n\t\n\t\tsquash (Number) - controls how long the squash should last (the gap between bounces, when it appears \"stuck\"). Typically 2 is a good number, but 4 (as an example) would make the squash longer in relation to the rest of the ease. Default: 0\n\t\n\t\n\t\tsquashID (String) - the ID that should be assigned to the squash ease. The default is whatever the ID of the bounce is plus \"-squash\" appended to the end. For example, CustomBounce.create(\"hop\", {strength:0.6, squash:2}) would default to a squash ease ID of \"hop-squash\".\n\t\n\n\n\n\tHow do you get the bounce and the squash\/stretch to work together? You'd use two tweens; one for the position (\"y\"), and the other for the scaleX\/scaleY, with both running at the same time:\n \n\n\n\/\/Create a custom bounce ease:\nCustomBounce.create(\"myBounce\", {strength:0.6, squash:3, squashID:\"myBounce-squash\"});\n\/\/do the bounce by affecting the \"y\" property.\nTweenMax.from(\".class\", 2, {y:-200, ease:\"myBounce\"});\n\/\/and do the squash\/stretch at the same time:\nTweenMax.to(\".class\", 2, {scaleX:140, scaleY:60, ease:\"myBounce-squash\", transformOrigin:\"center bottom\"});\n \n\n\n\t\n\t\tSee the Pen CustomBounce from GreenSock by GreenSock (@GreenSock) on CodePen.\n\t \n\n\n\n\tWhere can I get it?\n\n\n\n\tCustomWiggle and CustomBounce are membership benefits of Club GreenSock (\"Shockingly Green\" and \"Business Green\" levels). It's our way of saying \"thanks\" to those who support GreenSock's ongoing efforts. Joining Club GreenSock gets you a bunch of other bonus plugins and tools like MorphSVGPlugin as well, so check out greensock.com\/club\/ for details and sign up today.","enclosure":{"@attributes":{"url":"https:\/\/gsap.com\/community\/uploads\/monthly_2017_01\/1472229252_201701featured-wiggle-bounce.jpg.dfc1284e9346a4d35cb709be366b0bc6.jpg","length":"26114","type":"image\/jpeg"}},"pubDate":"Wed, 04 Jan 2017 02:18:16 +0000"},{"title":"Introducing CustomEase","link":"https:\/\/gsap.com\/community\/customease\/","description":{},"enclosure":{"@attributes":{"url":"https:\/\/gsap.com\/community\/uploads\/monthly_2016_12\/1366172126_201611custom-ease-1.jpg.3a3cac4c56343ad1a583f419be75f1d2.jpg","length":"37329","type":"image\/jpeg"}},"pubDate":"Fri, 02 Dec 2016 17:48:00 +0000"},{"title":"GSAP 1.19.0 Released","link":"https:\/\/gsap.com\/community\/1-19-0\/","description":"Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details.\n\t \n\n\n\n\tGSAP version 1.19.0 introduces some exciting new features for advanced users as well as conveniences for everyone (even the \"greenest\" novices). The most noteworthy improvements are summarized below:\n \n\n\n\t\n\n\n\n\tFunction-based values\n\n\n\n\tInstead of a number (x:100) or string (width:\"300px\") or relative value (y:\"+=50\"), you can now define most values as a function that'll get called once for each target the first time the tween renders, and whatever is returned by that function will be used as the value. This can be very useful for randomizing things or applying conditional logic. See it in action in the demos below.\n \n\n\n\t\n\t\tSee the Pen BzmGba by GreenSock (@GreenSock) on CodePen.\n\t \n\n\n\t...and more\n\n\n\n\tGSAP 1.19.0 is more ES6-friendly (for example, you can npm install gsap and then import {TweenLite, Elastic, TimelineMax} from \"gsap\" in your project). Plenty of bug fixes too. See the whole list in the github changelog. DOWNLOAD GSAP TODAY\n \n\n\n\tHappy tweening!","enclosure":{"@attributes":{"url":"https:\/\/gsap.com\/community\/uploads\/monthly_2016_07\/42474505_201607gsap-1-19-0.gif.6577945c01f3ae0cf6fd1acfff4858fc.gif","length":"13630","type":"image\/gif"}},"pubDate":"Tue, 19 Jul 2016 12:00:00 +0000"},{"title":"The \"Why\" Behind the GreenSock License","link":"https:\/\/gsap.com\/community\/why-license\/","description":"Have you ever wondered why GreenSock doesn't use a more common open source license like MIT? Sometimes our licensing model is misunderstood but hopefully after reading this article you'll see why it is so foundational to the success of our tools and why it ultimately benefits users too.\n \n\n\n\tOpen source is awesome!\n\n\n\n\tIf you had to write and maintain your own jQuery or React or GSAP, could you do it? Would it be as refined and reliable? Probably not. How many times have you found a library or chunk of code on github that saved you hours of development time? Open source can be a quick path to great results. It also serves as a jumping-off point for up-and-coming developers to share their innovation, inspiring others to write better code. Open source is easily one of the most influential movements in the entire development community. We're certainly not anti-open-source. Quite the contrary.\n \n\n\n\tOpen source is *not* always awesome\n\n\n\n\tDespite its strengths, there are some dark sides to open source. Many projects are riddled with bugs, poorly documented, and sometimes even dangerous to use. The web is littered with abandoned projects that once seemed promising. It's like a clearance bin you'd find at a discount store; there may be some treasures in there, but you'll have to dig through a lot of undesirables to find the gems. In an industry that's inundated weekly with \"hot new\" libraries, all just a click away for free, it can be tough to figure out which ones to gamble on.\n \n\n\n\tCommitment required(?)\n\n\n\n\tSome libraries are one-trick ponies that don't require ongoing commitment. For example, a math library that performs matrix operations or a formatting library. If the author abandons the project, it's no big deal. Other projects, like a full-featured animation library, are much more complex and leverage browser-level optimizations that are moving targets. Vendor-specific bugs need to be worked around or new browser features get introduced that beg to be animated. Plus, animation is the most performance-sensitive aspect of the user experience, so a commitment to ongoing optimization pays dividends. Beyond the code itself, what about community, documentation and examples? These become increasingly important as a library's feature set expands and companies standardize on it, needing to train new staff. Again, some projects have very little need for ongoing support but for GreenSock, it seemed essential.\n \n\n\n\tHampered by success\n\n\n\n\tParadoxically, success is the very thing that kills many open source projects because they don't have a funding mechanism to underwrite all the demands. The project that was once the twinkle in the author's eyes often ends up being a thorn in their side. They can't afford (or don't really want) to keep up with the demands. That's not to say that all open source projects suffer this fate. We have the utmost respect for open source authors, and we don't mean to diminish anyone's hard work or generosity. But there are some common frailties of open source projects in general that GreenSock aims to avoid. Having built and maintained a popular library for over a decade, we've learned that one of the most important factors in keeping a complex project like GSAP vibrant is the licensing model. Our goal was to make GreenSock tools not only accessible (which MIT does a great job of), but also sustainable, business-friendly, consistent, and respectful. We needed a license that would have the best chance of facilitating those goals, as described below:\n \n\n\n\tSustainable\n\n\n\n\tScores of animation libraries have come and gone over the years. We didn't want to be just another flash in the pan that ultimately leaves users feeling abandoned. Trust is paramount for us. We wanted the GreenSock brand to be associated with an exceptionally high level of commitment and reliability. Earning that trust requires a consistent, full-time effort so we considered these funding models:\n \n\n\n\t\n\t\tSelf-funded - most open source projects are self-funded, meaning that the authors cover all the costs themselves, typically by donating their time and resources. It's noble and perfectly adequate for many projects. An MIT (or similar) license is a great fit because it allows an author to share code with almost zero strings attached. However, the commitment level tends to be unreliable and self-funded projects are rarely sustained long-term. With our particular project and goals, this wasn't a good fit.\n\t\n\t\n\t\tCorporate sponsorship - sometimes huge companies like Adobe, Microsoft, Facebook, or Google are willing to contribute funds to encourage a project. They usually have a vested interest in its success. For example, Adobe helps fund CreateJS which is a set of libraries that its very own Adobe Animate (formerly Flash) relies on. React is underwritten by Facebook. This can be a great way to offload development costs onto some deep-pocketed corporations, keeping it totally free for end users. The risk, however, is that if the project goals don't line up with the corporation's agenda (which can shift), funding gets yanked or the developers get pressured to go in a direction that may not be good for end users. If the company has a bad year, they may re-allocate resources. The project is ultimately beholden to a few key sponsors with potentially conflicting objectives. This wasn't something we were comfortable with although we acknowledge that it's a great solution for certain projects.\n\t\n\t\n\t\tPrivate investors - famo.us is probably the most well-known example of an \"open source\" project that took on private investors. A few years and $30,000,000+ later, it stopped development of its open source library and laid off a large chunk of its staff, deciding to \"pivot\" in a more profitable commercial direction. Private investors want a return on their investment (which is completely understandable) but an MIT license can make that very difficult because it leaves the IP (intellectual property) wide open for anyone to steal, including competitors. Similar to corporate sponsorship, projects who get their funding this way are beholden to a few key stakeholders who may have a very different agenda than end users. Again, this wasn't an ideal fit for GreenSock.\n\t\n\t\n\t\tUser-funded - when funding comes directly from end users, it creates a wider base (more stable) and incentivizes the kind of innovation that end users actually care about, otherwise funding naturally dries up. That's a healthy dynamic for aligning agendas. Rather than serving a small set of outside investors looking for a return or a corporation with profit centers to bolster, end users play the central role. The downside, of course, is that certain features or use cases involve a fee. That can be a tough pill to swallow for some, especially when \"free\" MIT-licensed options abound. And it takes time to build up a wide base of users who literally \"buy in\". Trust and longevity are key. But a surprising number of users embrace this model because it allows them to \"vote\" with their dollars and participate in making a product they love continue to thrive. While this model certainly isn't for everyone, it has been a good fit for GreenSock.\n\t\n\n\n\n\tAccessible\n\n\n\n\tSometimes we hear comments like \"you can't use GreenSock in commercial projects without a license.\" WRONG. [loud buzzer noise]. Our license was designed to make the tools extremely accessible, even permitting usage in one-off commercial projects (where you get paid a one-time fee by a single client). And of course it's free to use in non-commercial projects (see licensing page for details). That way, a certain breed of power-user provides the funding that benefits everyone. An estimated 95%+ of our users never pay us a dime. So while a rare type of commercial project does require a \"Business Green\" Club GreenSock membership (which covers an unlimited number of projects while active), the vast majority of users never need that special license. This accessibility was a cornerstone of our approach. We didn't want to hide all the tools behind an intimidating paywall or make all commercial uses trigger a fee. Yet it couldn't be as unrestrained as MIT because that would create vulnerabilities for us and our users (as described in this article). Another way we keep the core tools accessible is by freely exposing the raw source code both on github and in our downloads. Users can peek under the hood and see how things work. That makes troubleshooting and learning much easier. We tried to strike a balance of openness and healthy insulation from the frailties of MIT.\n \n\n\n\tBusiness-friendly\n\n\n\n\tMost businesses are very concerned about IP infringement, lawsuits, and indemnification. The \"no strings attached and no warranties\" nature of MIT is both a strength and a weakness. It simplifies sharing, but what if an open source library leverages someone else's IP? What if it uses \"copyleft\" code that infects anything it touches, requiring that all projects using it be open-sourced as well? That could be a huge problem for businesses with proprietary tools in a competitive market. GreenSock's license doesn't have any attribution requirements, nor does it impose share-alike rules like GNU and Creative Commons. Furthermore, it contains warranties that aren't found in MIT-like licenses, making GreenSock more business-friendly. It survived the software audits and legal review process at reputable companies like Google, Sony, EA, Intel, every major ad network, and many others. This vetting is necessary in the business world where there is so much at stake. The license also allows for code edits to be made for bug fixes. Typically that's not necessary because we handle it as a part of our ongoing support efforts, but businesses appreciate knowing that if we relaxed those efforts, they'd still be able to get their project working if they ran into a bug and needed to squash it themselves.\n \n\n\n\tConsistent\n\n\n\n\tMIT-licensed projects spread on github where it's trivial to fork them and start making custom flavors. That's ideal for authors whose goal is to start something and then step back to let the community run with it. But that can lead to a lot of confusion as different flavors start popping up with incongruent feature sets and incompatibilities. Focus and direction are easily lost. If there's no driver (or too many drivers), it can be a scary ride for the passengers. We wanted the GreenSock brand to convey a certain level of consistency and reliability. That's part of the reason we don't generally accept pull requests - we keep a tight reign on the codebase so that we are intimately aware of every piece. That allows us to not only support it, but also stand behind our IP warranties.\n \n\n\n\tRespectful\n\n\n\n\tWe believe that if we respect our users, they'll generally reciprocate that respect. Most people want to do the right thing. So we don't inject \"phone home\" code that reports usage or causes things to suddenly stop working when a membership expires. We don't force business customers register each user or enter serial numbers to activate seats. We don't limit installations or the number of projects that the license covers. We don't burn extra energy policing usage. We've never sued anyone. We funnel our energy into refining the tools, innovating, educating, and supporting our users. We put a lot of effort into creating a positive, respectful culture in the forums which boast over 50,000 members and 80,000 posts. We don't charge a dime for support there, and we don't shamelessly promote Club GreenSock memberships. Again, we trust that if we keep trying to provide value, people will notice and gladly sign up to support the efforts at some point. An unintended benefit of our licensing model has been that it naturally weeds out users who expect everything for free and don't recognize the substantial effort that goes into these projects. We're left with users who tend to be very respectful and trustworthy (exactly who we like to serve).\n \n\n\n\tConclusion\n\n\n\n\tGreenSock isn't the typical open source project. Our licensing model reflects that. It offers a blend of sustainability, accessibility, business-friendliness, consistency, and respect that'd be very difficult (or impossible) to accomplish with an MIT-like license. It's not necessarily \"better\" (open source is fantastic, really) but in our particular case it aligned more closely with the project goals. In fact, many companies have chosen GreenSock because of the license, not in spite of it. They wanted to invest in a platform that had a certain level of commitment behind it that's rare in the open source world. After a decade, the experiment seems to be working and we have our supporters to thank for that. We've been humbled and inspired by Club GreenSock members throughout the years. It's a privilege to create these tools and serve the community. We're grateful for their partnership which makes it all possible.","enclosure":{"@attributes":{"url":"https:\/\/gsap.com\/community\/uploads\/monthly_2016_02\/1191004633_201602why-license-1.gif.f2ace60b9bcd0e29a0d9c6eb9c05fe7f.gif","length":"17903","type":"image\/gif"}},"pubDate":"Mon, 01 Feb 2016 21:02:50 +0000"},{"title":"MorphSVGPlugin Performance Update","link":"https:\/\/gsap.com\/community\/morphsvg-update\/","description":{},"enclosure":{"@attributes":{"url":"https:\/\/gsap.com\/community\/uploads\/monthly_2015_12\/1663638165_201512morph-performance-update.gif.2da712ece805a043e388966a468a697d.gif","length":"25314","type":"image\/gif"}},"pubDate":"Tue, 22 Dec 2015 00:35:54 +0000"},{"title":"Banner ads: the kilobyte conundrum","link":"https:\/\/gsap.com\/community\/kilobyte-conundrum\/","description":"Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements including a much smaller file size! Please see the GSAP 3 release notes for details.\n\t \n\n\n\n\t \n\n\n\tIn recent months, the whirlwind shift to HTML5 in the banner ad industry has prompted a slew of policy changes. Publishers and networks are scrambling to answer questions from designers who want to build things \"properly\" (a term whose meaning can vary wildly these days). Growing pains abound. Shortly after we published an article describing the state of affairs and offering recommendations for a path forward, the IAB released a draft of their new HTML5 ad specs which echoed many of those recommendations. For example, the file size limit for standard ads was raised to 200kb. This was cause for much celebration across the industry. But we're not out of the woods yet. There is still a persistent mindset about how we look at kilobytes that's crippling the web. This article aims to challenge the old paradigm and explain why it's so important to re-assess kilobyte costs.\n \n\n\n\tWhy limit kilobytes?\n\n\n\n\tConventional wisdom says that kilobytes have a direct impact on load times and consequently user experience. File size limits exist to promote better performance. Period. Does conventional wisdom apply the same way in the HTML5 era? As we modernize our kilobyte-count policies, let's remember what the goal is: performance...or more accurately, better user experience.\n \n\n\n\tNot all kilobytes are created equal\n\n\n\n\tHTML5 has unique strengths that challenge us to move beyond the simplistic \"aggregate total file size\" mentality of yesteryear. We need to look at kilobyte cost in a new, more nuanced way. There are four primary factors:\n \n\n\n\n\t\t\n\t\t\tCache status\n\t\t\n\t\tWhen is 35kb not really 35kb? When it's cached. A cached file has absolutely zero bandwidth cost regardless of its size. It loads immediately. This is particularly relevant in banner ads because there are certain chores common to almost every ad (like animation management tasks) that can be encapsulated and shared among many, many banners. The end user only loads that shared resource once and then it's cached and completely \"free\" thereafter...for all ads pointing at that file...on all sites.  \n\t\tDoes it really make sense to penalize ads for using those ubiquitous shared resources even though they're so pervasively cached that they don't typically affect load performance? In the modern world, file size limits should apply to the banner-specific assets that have a direct impact on loading times, not standardized shared resources.\n\t\n\t\n\t\t\n\t\t\tLocation\n\t\t\n\t\tKilobytes loaded from a CDN (Content Delivery Network) are typically \"faster\" because they're geographically dispersed and automatically loaded from the closest server. Plus CDNs have inherent redundancies leading to better reliability.\n\t\n\t\n\t\t\n\t\t\tSpread\n\t\t\n\t\t200kb spread across 24 files will take longer to download than 200kb spread across only 4 files. This isn't particularly relevant in the discussion about shared resources (which should be cached very quickly), but is an argument in favor of loading TweenMax rather than the combination of TweenLite, CSSPlugin, EasePack, and TimelineLite even though they collectively use fewer kilobytes. If the industry remains focused solely on aggregate total file size, it pushes designers\/developers toward less capable solutions that use fewer kilobytes even though they don't necessarily affect load times and could be replaced by more robust options that allow more creative expression.\n\t\n\t\n\t\t\n\t\t\tPerformance yield\n\t\t\n\t\tSome kilobytes are cheap in terms of the initial load but expensive for runtime execution. If our goal is better user experience, this factor should weigh heavily into the overall kilobyte cost equation. Would you rather have a banner that loads 200ms faster with janky animation or one that's super-smooth at runtime but takes a fraction of a second longer to load? Are publishers primarily concerned with displaying ads faster initially or ensuring that their site runs smoothly once loaded? Of course there are reasonable limits either way (waiting an extra 30 seconds for a huge file to load would be intolerable even if it made things run buttery smooth), but in most cases we're only talking about fractions of a second difference. For example, GSAP contains \"extra\" code that automatically GPU-accelerates transforms, applies lag smoothing, leverages 3D transform matrices, avoids layout thrashing, organizes things internally to make auto overwriting super fast, etc. - would removing those features for the sake of milliseconds on initial load (and zero savings once it's cached) be a step forward or backward?\n\t\n\n\n\tIncentivizing the wrong things\n\n\n\n\tIf the IAB and publishers don't embrace a common set of shared resources that get excluded from file size calculations...\n \n\n\n\n\t\tIt creates inefficiencies and redundancies - thousands of ads may each contain their own [duplicate] copy of a library like TweenMax, squandering valuable bandwidth.\n\t\n\t\n\t\tIt penalizes the use of robust, industry-standard libraries in favor of custom JS and micro-libraries that probably aren't nearly as capable, well-tested, cached, compatible, or performant.\n\t\n\t\n\t\tWhen something breaks, it will be more difficult for the various ad networks and publishers to troubleshoot and support custom JS and diverse micro-libraries. Lots of APIs to learn (or in the case of custom JS, more advanced expertise would be required).\n\t\n\t\n\t\tGreenSock would likely need to create a minimalistic version of TweenMax that has a tiny subset of the features. We feel strongly that this is a step backward and explain why here.\n\t\n\n\n\tSo ultimately, an \"all-inclusive\" file size policy could actually hurt load times as well as runtime performance. Yet the primary goal of file size limits is to protect performance. Hm. If the industry rallies behind a few popular, well-maintained and performant libraries, exempting them from file size calculations because of their ubiquity, it would not only deliver a better overall user experience, but also make it easier to create high quality banners. There would be fewer headaches for networks and publishers too. TweenMax (GSAP's largest file) technically weighs around 34kb but those kilobytes are the remarkably inexpensive kind. TweenMax is widely cached, it's on multiple CDNs, it packs various tools into a single file (zero \"spread\"), and it has an extremely high performance yield because of its many runtime performance optimizations. There are so many ads using it already that it has little or no effect on load times. Should it really cost banner ad designers\/developers 34kb against their file size budgets? Is it wise to incentivize cooking up their own custom code for handling animation tasks instead?\n \n\n\n\tThe good news\n\n\n\n\tEvery major ad network we\u2019ve contacted understands the value of shared resources and is very GSAP-friendly. In fact, virtually all of them have GSAP on their own CDNs and don't count its file size against ads unless the publisher insists otherwise (which is rare). One notable exception is Adwords, but we have been told they're working on a solution.\n \n\n\n\n\n\t\t\t\t \n\t\t\t\n\t\t\t\n\t\t\t\tAllows GSAP\n\t\t\t\n\t\t\t\n\t\t\t\tExcludes GSAP from \n\t\t\t\tfile size calculation*\n\t\t\t\n\t\t\t\n\t\t\t\tHosts GSAP on CDN\n\t\t\t\n\t\t\n\n\n\n\t\t\t\tAdvertising.com\/AOL\n\t\t\t\n\t\t\t\n\t\t\t\tYES\n\t\t\t\n\t\t\t\n\t\t\t\tYES\n\t\t\t\n\t\t\t\n\t\t\t\tYES\n\t\t\t\n\t\t\n\n\n\t\t\t\tGoogle DoubleClick\n\t\t\t\n\t\t\t\n\t\t\t\tYES\n\t\t\t\n\t\t\t\n\t\t\t\tYES\n\t\t\t\n\t\t\t\n\t\t\t\tYES\n\t\t\t\n\t\t\n\n\n\t\t\t\tFlashtalking\n\t\t\t\n\t\t\t\n\t\t\t\tYES\n\t\t\t\n\t\t\t\n\t\t\t\tYES\n\t\t\t\n\t\t\t\n\t\t\t\tYES\n\t\t\t\n\t\t\n\n\n\t\t\t\tSizmek\n\t\t\t\n\t\t\t\n\t\t\t\tYES\n\t\t\t\n\t\t\t\n\t\t\t\tYES\n\t\t\t\n\t\t\t\n\t\t\t\tYES\n\t\t\t\n\t\t\n\n\n\t\t\t\tFlite\n\t\t\t\n\t\t\t\n\t\t\t\tYES\n\t\t\t\n\t\t\t\n\t\t\t\tYES\n\t\t\t\n\t\t\t\n\t\t\t\tYES\n\t\t\t\n\t\t\n\n\n\t\t\t\tCofactor\n\t\t\t\n\t\t\t\n\t\t\t\tYES\n\t\t\t\n\t\t\t\n\t\t\t\tYES\n\t\t\t\n\t\t\t\n\t\t\t\tYES\n\t\t\t\n\t\t\n\n\n\t\t\t\tAdwords\n\t\t\t\n\t\t\t\n\t\t\t\tYES\n\t\t\t\n\t\t\t\n\t\t\t\tYES\n\t\t\t\n\t\t\t\n\t\t\t\tYES\n\t\t\t\n\t\t\n\n\n\n\t*Unless publisher objects which is uncommon \n\n\n\tGoogle DoubleClick is even pioneering a process that will automatically detect when GSAP is used in an ad and swap in its own CDN link to maximize caching benefits. Pretty cool stuff.  \n\n\n\tConclusion\n\n\n\n\tLet's embrace the unique strengths of HTML5 and modernize the way we count kilobyte costs. Let's support policies that incentivize better performance and user experience rather than a race to the smallest total file size for each individual ad. Caching, CDNs, kilobyte spread, and performance yield should all factor into the way we view kilobytes the HTML5 era.\n \n\n\n\tFAQ\n\n\n\n\n\t\tIsn't it unfair if the IAB only recommends a few popular libraries? What about newer or lesser-known libraries?\n\n\t\t\n\t\t\tThis is an entirely valid concern. The list should be reviewed regularly and the IAB can assess each library's industry support, performance profile, compatibility, and track record for ongoing updates and bug fixes. New contenders could be submitted for consideration anytime. But remember that the key to realizing the performance benefits is keeping the list short so that caching is focused and pervasive. If there are too many \"standardized\" libraries, it dilutes caching and defeats the purpose. There's no way that everyone will agree on which libraries should be on the list but if we get hung up on not offending anyone or being afraid to appear biased, we'll miss the opportunity to move the industry forward. The list won't be perfect, but not having a list at all is much worse.\n\t\t\n\t\n\t\n\t\tWhat happens when a library gets updated? Wouldn't it need to be re-cached?\n\t\t\n\t\t\tYes. And trust me - we want libraries to be updated somewhat regularly to work around new browser inconsistencies, patch library bugs, and implement new features that drive things forward. But these updates wouldn't need to interfere with existing or legacy ads - when a library is updated, a new CDN URL would be generated and new ads could optionally point to that version. Those ads would indeed trigger browsers to cache that new version but this should happen very quickly. Most likely within a matter of days the new version would be pervasively cached across the web. Yes, each end user would pay that kilobyte tax once on the first load and then it would be \"free\" thereafter.\n\t\t\n\t\n\t\n\t\tWould GreenSock still recommend this policy if GSAP wasn't included in the short list of exempt libraries?\n\t\t\n\t\t\tAbsolutely. This isn't just about getting GSAP an exemption - this is what we believe is best for the industry overall even if GSAP isn't on the list.","enclosure":{"@attributes":{"url":"https:\/\/gsap.com\/community\/uploads\/monthly_2015_10\/177332663_201510kilobyte-conundrum.gif.00b83255b1f7bcc6c22c2be76697cb32.gif","length":"11379","type":"image\/gif"}},"pubDate":"Thu, 15 Oct 2015 16:53:00 +0000"},{"title":"Introducing GSAP 1.18.0","link":"https:\/\/gsap.com\/community\/gsap-1-18-0\/","description":{},"enclosure":{"@attributes":{"url":"https:\/\/gsap.com\/community\/uploads\/monthly_2015_09\/118517177_201509GSAP-1_18.0.gif.35e5bf80410c682572f5ba7dffc8b69d.gif","length":"31601","type":"image\/gif"}},"pubDate":"Thu, 10 Sep 2015 00:03:27 +0000"},{"title":"Solutions for Banner Ads in the Post-Flash World","link":"https:\/\/gsap.com\/community\/html5-banners\/","description":{},"enclosure":{"@attributes":{"url":"https:\/\/gsap.com\/community\/uploads\/monthly_2015_08\/945251630_201508solutions-for-banner-ads.jpg.f28d725eb6e20e0670c10f5570741208.jpg","length":"56218","type":"image\/jpeg"}},"pubDate":"Fri, 07 Aug 2015 00:06:50 +0000"},{"title":"HTML5 Banner Survey: Results","link":"https:\/\/gsap.com\/community\/banner-survey\/","description":{},"enclosure":{"@attributes":{"url":"https:\/\/gsap.com\/community\/uploads\/monthly_2015_06\/1951676702_201506blog-bannerSurvey1.gif.e527482b98a90c9e52e6b8a3d6f31470.gif","length":"21333","type":"image\/gif"}},"pubDate":"Mon, 22 Jun 2015 15:18:49 +0000"},{"title":"Animating SVG with GSAP","link":"https:\/\/gsap.com\/community\/svg-tips\/","description":{},"enclosure":{"@attributes":{"url":"https:\/\/gsap.com\/community\/uploads\/monthly_2015_05\/957278909_201505blog-svg-tips-retina.gif.3c3e538b25597e89bdee24d15a6a1a84.gif","length":"21735","type":"image\/gif"}},"pubDate":"Mon, 04 May 2015 17:54:00 +0000"},{"title":"GSAP 1.16.x Update","link":"https:\/\/gsap.com\/community\/gsap-1-16\/","description":"Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. \n\n\tWe're constantly improving GSAP to solve the problems you face as a developer\/designer. In the recent release of GSAP 1.16.0 and 1.16.1, Draggable got some big upgrades and SVG support has never been better across the whole platform. Here's a summary of what's most exciting in 1.16.x:\n \n\n\n\tDraggable gets \"autoScroll\"\n\n\n\n\tWhat happens if you're dragging an element inside a scrollable container (or page) and you reach the edge? Wouldn't it be nice if it automatically scrolled in that direction for you? Wouldn't it be even cooler if it applied variable-speed scrolling based on how close your mouse\/touch is to the edge, and it handle MULTIPLE containers? Wish granted.\n \n\n\n\tVideo tour\n\n\n\n\t\n\n\n\n\tInteractive demo\n\n\n\n\t\n\t\tSee the Pen Draggable autoScroll by GreenSock (@GreenSock) on CodePen.\n\t \n\n\n\n\tDraggable's new getDirection() method\n\n\n\n\tSometimes it's useful to know which direction an element is dragged (left | right | up | down | left-up | left-down | right-up | right-down), or maybe you'd like to know which direction it is compared to another element. That's precisely what getDirection() is for.\n \n\n\n\tVideo tour\n\n\n\n\t\n\n\n\n\tInteractive demo\n\n\n\n\t\n\t\tSee the Pen Draggable getDirection() by GreenSock (@GreenSock) on CodePen.\n\t \n\n\n\n\tEasier SVG animation with svgOrigin\n\n\n\n\tFor SVG elements, CSSPlugin recognizes a new svgOrigin special property that works exactly like transformOrigin but it uses the SVG's global coordinate space instead of the element's local coordinate space. This can be very useful if, for example, you want to make a bunch of SVG elements rotate around a common point. So you can do TweenLite.to(svgElement, 1, {rotation:270, svgOrigin:\"250 100\"}) if you'd like to rotate svgElement as though its origin is at x:250, y:100 in the SVG canvas's global coordinates. It also records the value in a data-svg-origin attribute so that it can be parsed back in. So for SVG elements, you can choose whichever one fits your project better: transformOrigin or svgOrigin. Sara Soueidan used this feature in her excellent Circulus tool demo.\n \n\n\n\tInteractive demo\n\n\n\n\t\n\t\tSee the Pen GSAP svgOrigin by GreenSock (@GreenSock) on CodePen.\n\t \n\n\n\n\tFor more information about how GSAP has solved cross-browser SVG challenges, see https:\/\/css-tricks.com\/svg-animation-on-css-transforms\/ and for performance data, see https:\/\/css-tricks.com\/weighing-svg-animation-techniques-benchmarks\/.\n \n\n\n\tMore Draggable improvements\n\n\n\n\t\n\t\tDraggable exposes a lockedAxis property so that you can find out whether it's \"x\" or \"y\" (assuming you set lockAxis:true in the config object).\n\t\n\t\n\t\tNew onLockAxis callback that fires whenever the axis gets locked.\n\t\n\t\n\t\tSeveral performance optimizations were made to Draggable, particularly for transforms and scrolling.\n\t\n\t\n\t\tDraggable allows you to native touch-scroll in the opposite direction as Draggables that are limited to one axis. For example, a Draggable of type:\"x\" or \"left\" permit native touch-scrolling in the vertical direction, and type:\"y\" or \"top\" permit native horizontal touch-scrolling.\n\t\n\t\n\t\tSVG support is better than ever. It plots the rotational origin accurately, for example.\n\t\n\t\n\t\tTouch support has been improved as well.\n\t\n\n\n\n\tBug fixes\n\n\n\n\tSee the github changelogs for 1.16.0 and 1.16.1 for a complete list.\n \n\n\n\tConclusion\n\n\n\n\tIf you're already using GSAP and\/or Draggable, we definitely recommend grabbing the latest version. If you haven't tried GSAP yet, what are you waiting for? Head over to the Getting Started article\/video now and you'll be having fun in no time.\n \n\n\n\tHelpful links\n\n\n\n\t\n\t\tGetting Started with GSAP\n\t\n\t\n\t\tDraggable demo and main page\n\t\n\t\n\t\tDraggable docs\n\t\n\t\n\t\tGSAP docs\n\t\n\t\n\t\tGot questions? Visit the forums","enclosure":{"@attributes":{"url":"https:\/\/gsap.com\/community\/uploads\/monthly_2015_03\/384158415_201503GSAP_1_16.x_thumb.gif.0edc4dafa26dc45d3ee92481e77e9fb7.gif","length":"19855","type":"image\/gif"}},"pubDate":"Mon, 16 Mar 2015 20:21:07 +0000"},{"title":"Advanced tutorial: CubeDial, a 3D Carousel made with GSAP","link":"https:\/\/gsap.com\/community\/cube-dial-tutorial\/","description":{},"enclosure":{"@attributes":{"url":"https:\/\/gsap.com\/community\/uploads\/monthly_2015_02\/515365421_201502blog-cubeDial1.jpg.b35a7a62900638d9937ef6c3b2dc0382.jpg","length":"20924","type":"image\/jpeg"}},"pubDate":"Mon, 02 Feb 2015 20:38:19 +0000"},{"title":"Ease Visualizer","link":"https:\/\/gsap.com\/community\/ease-visualizer\/","description":"The ease-y way to find the perfect ease\n\n\n\n\tEasing allows us to add personality and intrigue to our animations. It's the magic behind animation, and a mastery of easing is essential for any skilled animator. Use this tool to play around and understand how various eases \"feel\". Some eases have special configuration options that open up a world of possibilities. If you need more specifics, head over to the docs.\n \n\n\n\t \n\n\nNotice that you can click the underlined words in the code sample at the bottom to make changes.\n \n\n\n\tQuick Video Tour of the Ease Visualizer\n\n\n\n\t\n\n\n\n\t \n \n\n\n\tTake your animations to the next level with CustomEase\n\n\n\n\tCustomEase frees you from the limitations of canned easing options; create literally any easing curve imaginable by simply drawing it in the Ease Visualizer or by copying\/pasting an SVG path. Zero limitations. Use as many control points as you want.\n \n\n\n\tCustomEase is NOT in the public downloads. To get access, create a FREE GreenSock account. Once you're logged in, download the zip file from your account dashboard (or anywhere else on the site that has a download button). Club GreenSock members even get access to a private NPM repo to make installation easier in Node environments.","enclosure":{"@attributes":{"url":"https:\/\/gsap.com\/community\/uploads\/monthly_2015_01\/42722020_201501ease-visualizer.gif.bcf1152721d918878f6a014fc0e2dac5.gif","length":"11934","type":"image\/gif"}},"pubDate":"Thu, 15 Jan 2015 00:16:00 +0000"},{"title":"CSS animations performance: the untold story","link":"https:\/\/gsap.com\/community\/css-performance\/","description":"Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. \n\n\tThere are some interesting (and surprising) performance implications of using CSS animations that aren't widely known. I stumbled across a few of them while running tests for a customer in the advertising industry who is pushing to have GSAP adopted as the standard, so I recorded a screencast explaining what I found. I figured it was worth sharing:\n \n\n\n\tSummary\n\n\n\n\t\n\t\tTimeline recordings in Chrome Dev Tools don't show the overhead involved with CSS animation of transforms, so people often misinterpret the [lack of] data. Recordings look \"clean\" with CSS and \"dirty\" with JS which leads to faulty conclusions about performance.\n\t\n\t\n\t\tCSS animations of transforms used twice as much CPU compared to JS according to Chrome's task manager.\n\t\n\t\n\t\tCSS animations caused the main thread to bog down more than using JavaScript animations. User interaction is typically handled on the main thread, making things feel sluggish to the user. It is especially costly if you animate transforms along with almost any other property at the same time.\n\t\n\t\n\t\tWebkit browsers have synchronization problems.\n\t\n\t\n\t\tJavaScript was faster than CSS animations on every device that I ran this test on \u2013 the only exception was animating transforms in Webkit browsers (and then there's that heavy cost on the main thread and sync problems).\n\t\n\t\n\t\tIn order to independently control the timing\/easing of transform components (rotation, scale, skew, position) in CSS, you must create a DOM node for each which negatively impacts performance. With JavaScript, no such workarounds are necessary. (see note below)\n\t\n\t\n\t\tI love Dev Tools - I'm not knocking it at all. These things are just tough to measure.\n\t\n\t\n\t\tDo your own tests! Don't put too much faith in Dev Tools or my tests. Use your eyes because ultimately perception is what matters to end users. Smooth movement and responsive UI are both important.\n\t\n\n\n\n\tLinks\n\n\n\n\t\n\t\tRaw Codepen test\n\t\n\t\n\t\tGoogle's Paul Lewis addresses CSS vs. JS Animations\n\t\n\t\n\t\tA great article about hardware accelerated CSS by Ariya Hidayat\n\t\n\t\n\t\tWhy GSAP? - a practical developer's guide\n\t\n\n\n\n\tUPDATE: After recording the video, I did some more tests that showed that one of the biggest contributors to the slowdowns in the pure CSS version was the fact that multiple elements had to be nested in order to accomplish the independent transform component controls. In other words, staggering the start\/end times (or easing) of rotation, scale, and position is practically impossible in pure CSS unless you nest things like that, but there's a relatively significant performance tradeoff. When nesting could be avoided, pure CSS animation of only transforms did appear smoother on webkit browsers under heavy pressure and it was basically indistinguishable from optimized JS animations under all other levels of pressure.","enclosure":{"@attributes":{"url":"https:\/\/gsap.com\/community\/uploads\/monthly_2015_01\/1875534574_201501css-performance-thumbnail.gif.5eb13616362aa7991121ae64e8ac1081.gif","length":"31478","type":"image\/gif"}},"pubDate":"Mon, 05 Jan 2015 10:40:57 +0000"},{"title":"Breakthrough: SVG animation with GSAP solves cross\u2011browser issues","link":"https:\/\/gsap.com\/community\/svg-transforms\/","description":"Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. \n\n\tWe're excited to announce enhanced SVG support baked right into GSAP's CSSPlugin. Now you can animate the rotation, scale, skew, position (and even change the transform origin) of SVG elements just like normal DOM elements. The chart below illustrates a number of cross-browser bugs related to CSS transforms on SVG elements. Four modern browsers interpret the same basic animation code in drastically different ways.\n \n\n\n\tBrowser comparison (without GSAP)\n\n\n\n\tSee the Pen GIFS: SVG + CSS Transform Problems by GreenSock (@GreenSock) on CodePen.\n \n\n\n\n\tBe sure to test the demo above in IE, Opera, FireFox, Safari and Chrome to see equal results.\n \n\n\n\tFind out how it all works\n\n\n\n\tIn order to help a wider audience understand how to get around the obstacles of working with SVG, Jack wrote an article packed with tons of info, animation demos and a video showing all the juicy details on www.css-tricks.com. We're honored that Chris Coyier allowed us to share these enhancements and time-saving techniques with the wider developer community on his highly-respected blog. Get all the juicy details in: SVG Animation and CSS Transforms: A Complicated Love Story. The techniques discussed will surely transform your SVG animation workflow","enclosure":{"@attributes":{"url":"https:\/\/gsap.com\/community\/uploads\/monthly_2014_10\/1061866563_201410svg_gsap_thumb.png.4a5e6923952ee6c6f7160f74d6cd6075.png","length":"57729","type":"image\/png"}},"pubDate":"Wed, 22 Oct 2014 17:14:16 +0000"},{"title":"GSAP 1.13.1 Released","link":"https:\/\/gsap.com\/community\/gsap-1-13-1\/","description":{},"enclosure":{"@attributes":{"url":"https:\/\/gsap.com\/community\/uploads\/monthly_2014_07\/1971245146_201407blog-responsive.jpg.af37fb5e5a3d9abc8d18e4b2628d5b5d.jpg","length":"27044","type":"image\/jpeg"}},"pubDate":"Tue, 29 Jul 2014 15:10:08 +0000"},{"title":"GSAP 1.12.0: Smoother, faster, smarter HTML5 animation","link":"https:\/\/gsap.com\/community\/gsap-1-12-0\/","description":"Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. \n\n\tWe're excited to announce several new features in the GreenSock Animation Platform (GSAP) 1.12.0 that will increase not only \"real\" performance, but \"perceived\" performance as well. The innovative lagSmoothing() feature allows GSAP to automatically heal from CPU spikes that cause lag, all while maintaining perfect synchronization between all animations. And the new \"lazy\" rendering helps avoid layout thrashing when many animations start simultaneously.\n \n\n\n\tHave you ever noticed how scrolling in iOS Safari stops all animations until the scroll stops, and then animations tend to jerk forward? Thanks Apple. The new lagSmoothing() makes it a much more pleasant experience, resuming animations fluidly.\n \n\n\n\tThese features are already activated by default in GSAP 1.12.0, so you get them \"free\" by updating. We've created a few demos and videos to help you understand the impact of these new changes. Both features are explained in detail below. Use the demos, watch the videos and be sure to snag the latest version of GSAP.\n \n\n\n\tVideos (watch these first)\n\n\n\n\t\n \n\n\n\tPerformance Test of lagSmoothing() and lazy\n\n\n\n\tWhen you click \"run test\", a tween is created for each blue box to animate it down 150px linearly. The point is to create a \"perfect storm\" scenario where a LOT of tweens are starting at the same time which would typically trigger the read\/write\/read\/write style recalculation performance killer in many browsers, hammering the CPU initially. Watch how much faster things are when you enable the new features.\n \n\n\n\tSee the Pen Blog Post: New GSAP 1.12.0 Performance Features by GreenSock (@GreenSock) on CodePen.\n \n\n\n\n\t\"lazy\" details\n\n\n\n\tSome browsers (notably Webkit) impose a performance penalty for sequential read\/write\/read\/write of DOM-related properties, forcing a costly style recalculation for each cycle so it is better to group reading and then writing tasks (read\/read\/write\/write is faster than read\/write\/read\/write).\n \n\n\n\tWhen you tween a property, GSAP must first read the current values so that it can properly interpolate between the start and end values (even for set() calls because they must accommodate reversion, like when sitting on a timeline that could be reversed). Consequently, when you have a bunch of tweens that are all rendering for the first time concurrently (on the same \"tick\"), each one would read and then write, resulting in the dreaded read\/write\/read\/write scenario. Normally, you'd never notice a difference unless you have a lot of tweens starting at the same time.\n \n\n\n\tAs of version 1.12.0, when a tween renders for the very first time and reads its starting values, GSAP will automatically \"lazy render\" that particular tick, meaning it will try to delay the rendering (writing of values) until the very end of the \"tick\" cycle which can improve performance. And again, this only happens on a single \"tick\", when that tween records its starting values. There are certain very specific scenarios when it may need to force an immediate render, and it will do so intelligently when necessary. That's why it's called \"lazy\" instead of \"delayedRender\" - it's not a promise to always delay the render, but it's giving GSAP permission to lazy-render if\/when it can. It wouldn't delay the render if, for example, you populate a timeline with a bunch of tweens of the same object and then you immediately seek() to the very end of the timeline - it'd need to render the tweens in sequence immediately to make that seek() function properly.\n \n\n\n\tlazy is true by default for pretty much all tweens except zero-duration ones (and set() calls) because it is implied that those should be rendered immediately, as you may have a line of code thereafter which depends on the new values being applied. For example:\n \n\n\n\/\/let's assume element's opacity is currently 1 and we want to quickly set it to 0 and report it...\nTweenLite.set(element, {opacity:0, lazy:true});\nconsole.log(\"opacity is: \" + element.style.opacity); \/\/1, not 0 because the tween hasn't rendered yet!\n\n\n\n\tIn most cases, you won't need to set lazy:true because it's the default for normal tweens, but if you create a LOT of set() calls in a row (like in a loop of more than 30), and you're aware of the risks (don't write code that relies on the tween rendering immediately), you could set lazy:true. You can also disable it on a particular tween by setting lazy:false in the vars object.\n \n\n\n\tAgain, you'll probably never need to worry about setting lazy yourself - the default behavior is ideal for the vast majority of cases. And this setting is only for tweens (TweenLite or TweenMax) since those actually read\/write properties. You'd never set lazy:true on a TimelineLite or TimelineMax, for example.\n \n\n\n\tNew force3D:\n\n\n\n\"auto\"\n\n\n\tfeature\n \n\n\n\tPreviously, you could set force3D:true to cause an element to always apply a 3D transform which typically gets that element its own compositor layer in the browser\/GPU, leading to better performance during animation. The primary down side to that technique is that it could eat up more memory. So for example, try animating 2000 elements with 3D transforms on an iPhone and then scroll the page - it gets pretty janky. Now, you can set force3D:\"auto\" which will act exactly the same as force3D:true except that at the end of the tween if there are no 3D transforms necessary (rotationX, rotationY, and z are all 0), it will automatically switch back to a 2D transform. You get smooth animation, and restored memory at the end.\n \n\n\n\tSummary\n\n\n\n\tWe're working hard to make sure your animations are buttery-smooth on every device and in every browser. Download the latest version of GSAP to get an instant performance boost today.\n \n\n\n\tRecommended reading:\n \n\n\n\t\n\t\tMain GSAP JS page\n\t\n\t\n\t\tMyth Busting: CSS Animations vs JavaScript\n\t\n\t\n\t\tjQuery vs GSAP: cage match\n\t\n\t\n\t\tCSS Transitions vs GSAP: cage match\n\t\n\t\n\t\tJump Start: GSAP JS\n\t\n\t\n\t\tWhy GSAP? A practical guide for developers\n\t\n\t\n\t\tSpeed comparison","enclosure":{"@attributes":{"url":"https:\/\/gsap.com\/community\/uploads\/monthly_2014_06\/7291215_201406blog-lagSmoothing1.jpg.85bd0d09c36d4191ef5c68b0dd6f91ed.jpg","length":"65260","type":"image\/jpeg"}},"pubDate":"Tue, 24 Jun 2014 15:35:55 +0000"},{"title":"CSS Animations: Workflow Issues Exposed [Includes Videos]","link":"https:\/\/gsap.com\/community\/css-workflow\/","description":{},"enclosure":{"@attributes":{"url":"https:\/\/gsap.com\/community\/uploads\/monthly_2014_01\/535684648_201401blog-CSSWorkflow.jpg.1f90c672fe87c2148eb04653fef395b2.jpg","length":"12413","type":"image\/jpeg"}},"pubDate":"Sun, 26 Jan 2014 13:40:42 +0000"},{"title":"What's so special about GSAP?","link":"https:\/\/gsap.com\/community\/why-gsap\/","description":{},"enclosure":{"@attributes":{"url":"https:\/\/gsap.com\/community\/uploads\/monthly_2014_01\/766473674_201001why-gsap-thumb.jpg.91c763fb15ae1b912ce9393e9fe47db4.jpg","length":"13262","type":"image\/jpeg"}},"pubDate":"Fri, 17 Jan 2014 10:28:00 +0000"},{"title":"iOS 7 Safari Performance: A Step Backward?","link":"https:\/\/gsap.com\/community\/ios7\/","description":"Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. \n\n\tWith the release of iOS 7, I was anticipating some big leaps forward in browser performance. What I found was quite surprising. Is anyone else experiencing the same thing? Here's a quick [and very casual] video showing what I discovered: A lot of people in the industry talk about the benefits of using CSS transitions because they're so much faster, especially with transforms (scale\/translate\/rotate) on mobile devices. What happened? Why is Zepto (which uses CSS transitions) so much slower? GSAP's performance remains solid in iOS 7 (far better than jQuery and other libraries), but CSS transitions fall flat on their face (at least with transforms). Can anyone shed some light on what's happening? Are you seeing the same results in iOS 7? Also, is anyone else seeing worse performance when altering the scrollTop or scrollLeft of DOM elements? Useful links\n \n\n\n\t\n\t\tSpeed test\n\t\n\t\n\t\tDraggable Demo\n\t\n\t\n\t\tCSS Transitions\/Animations vs. GSAP Cage Match\n\t\n\t\n\t\tjQuery vs. GSAP Cage Match\n\t\n\t\n\t\tWhy GSAP? A practical guide for developers\n\t\n\n\n\n\tUPDATE: Apple reached out to us and acknowledged the apparent bug and said they're working on a fix. (Thanks Apple)","enclosure":{"@attributes":{"url":"https:\/\/gsap.com\/community\/uploads\/monthly_2013_09\/1726010951_201309blog-iOS7-step-backward.jpg.d24630a21b974438f90e8b53f8f933b2.jpg","length":"18660","type":"image\/jpeg"}},"pubDate":"Fri, 20 Sep 2013 09:43:19 +0000"},{"title":"Meet GreenSock's Draggable: spin, flick, drag, throw, or scroll with \"physics\"","link":"https:\/\/gsap.com\/community\/meet-draggable\/","description":"Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. \n\n\tMaking a DOM element draggable isn't terribly difficult - there are jQuery plugins and even some native HTML5 capabilities in newer browsers. But generic dragging is kinda boring. What about smooth, natural momentum-based continuation after the user releases the mouse (or touch on mobile devices)? What about imposing bounds and edge resistance and silky-smooth redirection to certain landing values that you provide? Or flick\/drag scrolling with bounce-back that doesn't look awkward? Or instead of dragging to change the position of an element, what if you want to spin it? Maybe you even want to track the momentum and let it come to rest naturally or rig it to glide to a stop at a certain value, Wheel-of-Fortune style? Yeah, that's a lot more complex. In fact, it can be a real drag to build (sorry, the pun was irresistible).\n \n\n\n\tDraggable makes it remarkably simple. More importantly, it delivers a very fluid user experience on both mobile devices and desktop browsers.\n \n\n\n\tInstead of explaining what makes Draggable so special, we built an interactive demo that showcases some of its talents. There are even code samples that update as you change the options. Go play around and have some fun.\n \n\n\n\t\n\t\t\n\t\t\tView Demo","enclosure":{"@attributes":{"url":"https:\/\/gsap.com\/community\/uploads\/monthly_2013_08\/1633300165_201308blog-meet-draggable.jpg.87013fa12c016b4b1c7526ebc05b9b0c.jpg","length":"13338","type":"image\/jpeg"}},"pubDate":"Tue, 20 Aug 2013 07:00:59 +0000"},{"title":"GSAP JS 1.9.0 Released","link":"https:\/\/gsap.com\/community\/gsap-js-1-9-0\/","description":{},"pubDate":"Tue, 05 Mar 2013 00:15:12 +0000"}]}}