Jump to content
GreenSock

Search the Community

Showing results for tags 'gsap'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. Hello all, I am new to GreenSock and the forum. I must say I am loving it! We are doing a Cordova mobile app with React. We started using GSAP for all the animations. This works great in Ripple and also physical Android devices. Even older Android devices, which we were sure were going to be a problem, everything is running super smooth. The problem is with iOS devices. We have tried iPhone 5S with both iOS 8.x.x and 9.x and also iPhone 6 and 6 Plus and on all of them performance is really bad. Animations are chopping up and stuttering all over the place. I tried adding the translate3d transform and also adding force3D to the options object and nothing helps. In the codepen the red div slides down more than one screen length and I know this is a lot of pixels to animate, but what works fine on an S3 I would expect to work better on an iPhone 6. Any tips for me? Thanks!
  2. Hi there. I'm trying to create a simple shooting star effect by scaling a rotated div. First of all the div scales out as though the star is streaking across (which is correct), then the scale collapses changing it's transform origin. However, as you see in the codepen the div jumps around. I'll probably make a work around and scale an image instead of a rotated div, but I thought I'd check to see if there was a way to do this utilizing only code. JS TweenMax.set('#star', {rotation:-30}); TweenMax.from("#star", .5, {scaleX:0}); TweenMax.to("#star", .5, {scaleX:0, transformOrigin:"left", delay:.5}); HTML <div id="star"> </div> CSS star { position:absolute; top:-1; left:68px; width:285px; height:94px; border-top:1px solid #fff; opacity:.5; }
  3. mramsey

    GSAP in Celtra

    Hey all, I asked this question on an earlier thread, only to realize it was a poll. So here it goes again: I'm new to using the Celtra platform and know very little JS (more a designer but very familiar with GS for Flash). Is there anyway you can send me the code block that you inserted into the Execute JS event to get you up and running with GSAP In Celtra. Do you add it to the screen you're on, or on a Frame Div? I've tried many options, watched the Custom Development webinar and I still can't seem to get it to work. Thank you in advance! Marc
  4. Hi all, This is a basic question that I've yet to find answered... how do site administrator's implement GSAP banners? I've prepared a test banner file set, based on the example banners on Greensock's site, and the administrator is unsure how to use it. What are the best practices for serving GSAP banners? Thanks!
  5. I'm trying to get this tween to work with an eventListener, and it works fine if I pull it out of it, but as soon as it's back in the event listener, nothing happens. I've also tried doing it with jquery and using .play() and .pause() and I am getting the same issue. I also tried setting the event listener to the clippath itself, rather than the circle, and no joy. No idea what's wrong here! I'm working directly off this other codepen and it works fine there. http://codepen.io/rorytawn/pen/OVeWNB
  6. Hi there. I'm working on an ad (can't share the actual images for) The behavior is different in IE9 from all other browsers. (i don't have access to test on anything above IE9) I haven't encountered this issue before. In addition, these are transparent png with drop shadows, the drop shadows fill while it's animating. As you can see from the following code: var i = 0; var a = 1; var d = .5; var d2 = .55; var d3 = .56; var t = .5; var tt = .25; var e = Power2.easeOut; TweenMax.set("#container", {alpha:a, ease:e}); TweenMax.to("#jacket", t, {y:35, x:-20, delay:d, ease:e}); TweenMax.to("#helmet", t, {y:66, x:-14, delay:d3, ease:e}); TweenMax.to("#goggles", t, {x:-105, y:10, delay:d2, ease:e}); TweenMax.to("#boots", t, {y:-6, x:16, delay:d2, ease:e}); TweenMax.to("#shirt", t, {y:-5, x:98, delay:d, ease:e}); TweenMax.to("#shoes", t, {x:-40, y:2, delay:d2, ease:e}); //TweenMax.to("#hat", t, {x:-100, delay:d3, ease:e}); TweenMax.to("#txt1", tt, {alpha:i, delay:2}); TweenMax.to("#txt2", tt, {alpha:i, delay:2.1}); TweenMax.to("#txt3", tt, {alpha:i, delay:2.2}); TweenMax.from("#txt2_1", tt, {y:25, alpha:i, delay:2.3}); TweenMax.from("#txt2_2", tt, {y:35, alpha:i, delay:2.4}); TweenMax.from("#bar", tt, {y:35, alpha:i, delay:2.5}); TweenMax.from("#txt2_3", tt, {y:35, alpha:i, delay:2.6}); TweenMax.from("#cta", tt, {y:35, alpha:i, delay:2.7}); I'm doing tweens on divs moving them based on their x and y positions. Looks great in everything but IE9 as I mentioned above. If you watch for example, the direction the #shirt div moves in any browser and then try in IE9. Moves in the opposite direction. Any suggestions? I tried switching the x and y to left/right top/bottom to no avail. I know MSFT is not supporting IE and I'm trying to guide my work off of 9, atleast, but in the meantime I could use some help. Thanks in advance for any tips.
  7. I have some troubles with progress and totalProgress methods. When you hover wave, penguin will go to your cursor position. I want: if cursor position to the left than penguin, penguin must follow by cursor, but now his animation continues. Also I need that penguin make backflip when his position and cursor's position are equal. Also when cursor leave wave picture, he must go on the top of the wave and drifting on the waves. But all of it after. Thank. Sorry for my English. http://codepen.io/anon/pen/gaeoEy
  8. Hi Guys, I'm having a few issues with a little page turner I'm trying to build. I started with Rodrigo's pen (Thank you ) and modified it to resemble a simple hard book (http://codepen.io/rhernando/pen/vjGxH/) where you click the pages and they turn. It currently works quite well in Chrome, Opera and Safari, but has issues in IE and Firefox. Firefox nearly gets it, but doesn't animate the page shading on the before element quite correctly (using CSSRulePlugin). It correctly shades the first page as it's rising, but fails to animate the second page as it's dropping (that might make more sense if you view the demo in Chrome first, then in Firefox) IE 11/10 ignore the perspective on the .Wrapper element. I've seen that you can keep the perspective in IE by repeating the transforms on the child elements, but this hurts my head when I try to do this with GSAP by setting values using TweenMax/TweenLite. Does anyone have any ideas? I've not tried Edge yet... will give that a go later.
  9. Hi All, I am trying to animate a mask in a Flash HTML5 Canvas document using TweenLite. I am trying to animate a symbol that is in a mask layer. But when I try I get a JavaScript console error: TweenLite.min.js:12 Uncaught Cannot tween a null target. My other objects animate fine. I believe I have all the proper .js files loaded in the HTML (easelJS, tweenJS, movieclip, preloadJS) and the Tweenlite files (CSSPlugin, EasePack, Tweenlite). Here is the code I used that throws the error. TweenLite.to(this.leftYellowStripeMask, .5, {y:-9, ease:Quad.easeOut, delay:.3}); I'm guessing masks are not supported this way? Thanks,
  10. Hi all, In the codepen attached I have a menu prototype that i'm building. As you can see there are a few actions on the hover state of the red open / close button. I have a timeline firing the circles behind the actual hit state and a separate action firing the SVG path state. The thing that's really bugging me and i'm at a serious loss to figure out is that once you click the open button and the timeline to open the button fires - the hover state stays in the position the button was originally (unless you move the cursor then the SVG goes back to it's normal state and the timeline to show the circles reverses. I'm not sure this is directly a GSAP question, but if any of you kind souls could please assist me - i'm going crazy here! Cheers
  11. Hi! I'm trying to animate an svg path using the DrawSVG plugin and can't seem to find a way to seamlessly loop the path using a consistent width around the connected path. I've seen examples of this accomplished with css but can't seem to be able to accomplish this using the plugin. Does anybody know how this can be done? Thanks!
  12. Hi, Been trying to get this to work for a little while now, a bit stuck. CodePen: http://codepen.io/Dev-KP/pen/jbMWxy Basically the individual animations work: .add(aninIn(copy1, 20)) //.add(aninOut(copy1, 20)) When one of them is commented out the other will work perfectly, but having them both there seems to make them merge. I'm guessing it's something to do with the .set in the returned tiimelines? If I am not mistaken the nested timelines should play one after another? Or is this something for immediateRender? Cheers P
  13. I've read through the docs but couldn't find anything relating to this in there. Is it possible for us to trigger functions or other tweens whilst dragging in draggable? For example if you started dragging, the container would tween to an opacity change or the cursor would change whilst you were dragging then change back when you let go. I've attached a pen I have that uses draggable if it's any help to work with. Thanks!
  14. Hi there. I'm using TweenMax to do position tweens on divs containing text that is styled using a font family from google fonts. The font weight is bold. I find on Firefox and Safari, the font seems to change weight during the tween. Is this a known bug? (don't have time to put together a codepen at the moment but will if needed)
  15. 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. The latest version of GSAP delivers some fun new features that open up entirely new animation possibilities. Check out the videos and demos below that show what's so exciting about 1.18.0. Here's a quick summary: New "cycle" property allows you to add rich variations to staggered animations Relative HSL color tweens (affect just the hue, saturation or lightness) Complex string tweening like "1px 5px rgb(255,0,0)" Numerous improvements and bug fixes (see github) New "cycle" property for staggered animations Have you ever wanted to animate a bunch of elements/targets and alternate between certain values (or even randomize them) in a staggered fashion? The new super-flexible "cycle" property does exactly that. Instead of defining a single value (like x:100, rotation:90), you can define an Array of values to cycle through (like cycle:{x:[100,-100], rotation:[30,60,90]}) or even use function-based values (like cycle:{x:function() { return Math.random() * 200; }}). The amount of functionality you can pack into a single line of code is staggering (pun intended). Demo: array-based and function-based "cycle" values See the Pen Basic staggerTo() using cycle by GreenSock (@GreenSock) on CodePen. Advanced "cycle" effects with SplitText See the Pen SplitText with stagger and cycle by GreenSock (@GreenSock) on CodePen. Caveats The cycle property is available only in the staggerTo(), staggerFrom(), and staggerFromTo() methods in TweenMax, TimelineLite and TimelineMax. When using function-based values the function will be passed an argument which represents the index of the current tween. Inside the function body, the scope (this) refers to the target of the current tween (see source of first demo above). Relative HSL color animation Have you ever wanted to tween a color to something a little darker or lighter without having to guess at cryptic hex values? How about tween a hue to 180 degrees around the color wheel? With relative HSL tweening, it's easy. You can now use familiar relative prefixes ("+=" and "-=") directly inside hsl() strings! //30% darker backgroundColor:"hsl(+=0, +=0%, -=30%)" //to grayscale (0% saturation) backgroundColor:"hsl(+=0, 0%, +=0%)" //opposite color (180 degrees around the other side of the color wheel) backgroundColor:"hsl(+=180, +=0%, +=0%)" Relative HSL demo See the Pen Relative HSL color tweening in GSAP 1.18.0 by GreenSock (@GreenSock) on CodePen. Caveats Be careful about doing relative tweens when they could be interrupted. For example, if you have a mouseover that creates tween to +=30% and then a mouseout that does -=30% and then the user rolls over/out/over/out, you'll get odd results because of the nature of relativity. For bullet-proof rollover effects with relative values check out the demo we used in the video: Hover Demo with Relative HSL Values When you tween to a saturation of 0%, that basically loses any kind of hue data - the underlying color/hue of grayscale is non-existent. So then if you try tweening back to a saturation of 80% or something, it'll be red because that's the default zero position of hue. For example, tween a blue <div> to "hsl(+=0, 0%, +=0%)" and then to "hsl(+=0, 80%, +=0%)", it'll end up red instead of blue. That's not a bug - it's just the nature of colors in the browser (they end up in the rgb color space). Tween complex string-based values Complex string-based values containing multiple numbers can be animated without any extra plugins. For example, a value like "10px 20px 50px" can be animated to "4px 13px 200px". GSAP will find each number in the strings (in order), compare them and animate the ones that changed. CSSPlugin already does this for CSS values and it even converts units, but the base engine (TweenLite) can now do basic string tweening. It will even find rgba(...) values and make sure to round them appropriately during animation. This new feature extends to AttrPlugin too which means it can animate the complex strings inside SVG element attributes like the points in a <polygon> or <polyline> or even <path> data (please carefully read the caveats below). See the Pen Complex string-based tweening: simple shape morph by GreenSock (@GreenSock) on CodePen. Caveats This feature is NOT intended to perform complex shape morphing in SVG. It simply animates the numbers inside the strings (in order). Robust shape morphing requires dynamically parsing path data and injecting extra points in certain cases. This new complex string-based tweening lays the groundwork in the core to do a lot of advanced effects in the future, especially via plugins. If you're animating the "d" attribute of a <path> element or the "points" attribute of a <polygon> or <polyline> element, keep in mind that you MUST make sure the number (and type) of points match between the starting and ending values. And since those are attributes, use the AttrPlugin (which is already inside TweenMax). Community Demos City Construction by Sarah Drasner See the Pen City Construction Site by Sarah Drasner (@sdras) on CodePen. GreenSock Cycle by Petr Tichy See the Pen GreenSock - staggerTo with cycle by GreenSock (@GreenSock) on CodePen. Special Thanks This major update is extra special as it contains features that were largely shaped by feature requests and feedback from our community. We really appreciate the strong community that we have in our forums that not only helps each other, but also helps shape the tools themselves. Extra special thanks to Elliot Geno for suggesting cycle and relative HSL tweening, Diaco for being a testing powerhouse, and everyone who voted on the API changes. Now go download GSAP 1.18.0 and make something beautiful.
  16. Holla, I need to reset the animation when I close menu and open it again how can I do that ?? annimation works only the first time when I open menu !! thanks for help.
  17. I am using TweenMax to do a simple animation on slides, which looks like this: TweenMax.to(slides, 1.2, {y: (-100 * slideNum) + '%', ease: Power1.easeInOut}); I can see in google dev tools that layout is invalidated and recalculated for each update when using this function, but the translate css property should not need to recalculate the layout but only use composition. http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ Is this a bug, a sideeffect to animation using js or just me misunderstanding the concept completely
  18. Hi there. This seems rather simple but actually might not be as a simple of a solution as I was hoping for. I'm trying to transform the height of a div: #mountain { position: absolute; top: 175px; left: 18px; width:123px; height:46px; background-image:url(mountain.png); } Using this GSAP TweenMax.from('#mountain', .5, {height:0, transformOrigin:"bottom"}); On <div id="mountain"></div> However it does transforms the height, it scales the div from the top down regardless of the transformOrigin setting. What am I missing? I suspect transformOrigin does not cover height? Can you suggest a workaround for what I'm trying to accomplish? Thanks.
  19. Hello all, I wasn't sure where to put this so i'm just going to leave it here, please move it if it's in the wrong forum! I work as Senior designer at Sony Music UK and we recently launched our new official website that is powered by Greensock. In fact I now use GSAP on every artist website or web application that we build in house. GSAP has truly revolutionised the way we are able to work, so thank you very much and keep up the good stuff! Below are a few of our recent projects using GSAP. Loads more coming before the year is finished too http://sonymusic.co.uk http://alexadairmusic.com http://little-mix.com http://calvinharris.co.uk http://bmthofficial.com
  20. Hi, I'm creating a simple polygon svg shape, and using it to mask an image using the clip-path:url(#id) method. I'm then trying to animate this using GSAP. This works fine, except in FireFox, where no animation occurs. This can be viewed at this codepen: http://codepen.io/rorytawn/pen/OVeWNB. All I'm trying to animate is simple 2D transforms like x and scale. I know FireFox has some issues with clip-path, so I tried animating the same shape, when it is not used as a mask, and that works fine in FireFox. So the issue is something to do with animating the svg when it is assigned to clip-path. I tried another example using GSAPs AttrPlugin, which does work in all browsers including FireFox. Codepen here: http://codepen.io/rorytawn/pen/MwMbVx. But as far as I'm aware, this won't allow me to animate using css features, rotation, skew etc. If anyone can please point me in the right direction to get the first example to work in FireFox it would be much appreciated! Many thanks!
  21. Hi Guys, I was just playing with some really nice text effects from another codepen, and using GSAP to tween the filter values. I'm getting a glitch when the animation starts/resets though, so I think I need to set something at the start to get rid of it! Any ideas where the glitch is coming from? Note that it doesn't work in IE at all! Cheers, Paul
  22. Hi all, I'm in the process of making a headline page with typewriter-ey effects and large epilepsy-inducing text replacement. I've managed to use the TextPlugin to great effect for my primary headline (turned off for the purpose of this question in the blockLetters timeline). What i'm struggling to do is combine both the TextPlugin and SplitText to effect as you can see in the timeline that's active (albumLetters). Ideally i'd want the div to be empty on load then I can control the entire thing through GSAP but it doesn't seem to want to change the copy in the fullText div after SplitText has done it's thing. Any ideas?
  23. Hi, I am having a bit of trouble with this script we have been working on. Trying to get the Pagination to work in sync with the next/prev and auto rotate slider. Here is our script. Any help is appreciated. $(function(){ var $slides = $(".slide"); var currentSlide = 0; var slideDot = 1; var stayTime = 10; var slideTime = 1.3; var numberOfSlides = $slides.length -1; TweenLite.set($slides.filter(":gt(0)"), {opacity:0,display:'none'}); TweenLite.delayedCall(stayTime, nextSlide); function nextSlide(){ TweenMax.to(".paginatorActive", 1, {css:{className:"paginatorLink"}, delay:0}); TweenMax.to("#slide" + slideDot, 1, {css:{className:"paginatorActive"}, delay:0}); TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} ); currentSlide = ++currentSlide % $slides.length; slideDot = ++slideDot % $slides.length; TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} ); TweenLite.delayedCall(stayTime, nextSlide); } $('.go-next').click(function() { TweenMax.to(".paginatorActive", 1, {css:{className:"paginatorLink"}, delay:0}); TweenMax.to("#slide" + slideDot, 1, {css:{className:"paginatorActive"}, delay:0}); TweenLite.killDelayedCallsTo(nextSlide); TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} ); currentSlide = ++currentSlide % $slides.length; slideDot = ++slideDot % $slides.length; TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} ); }); $('.go-prev').click(function() { TweenMax.to(".paginatorActive", 1, {css:{className:"paginatorLink"}, delay:0}); TweenMax.to("#slide" + slideDot, 1, {css:{className:"paginatorActive"}, delay:0}); TweenLite.killDelayedCallsTo(nextSlide); TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} ); currentSlide = --currentSlide % $slides.length; slideDot = --slideDot % $slides.length; TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} ); }); $('.banner').mouseenter(function() { TweenLite.killDelayedCallsTo(nextSlide); }); $('.banner').mouseleave(function() { TweenLite.delayedCall(stayTime, nextSlide); }); for(i = -1; i < numberOfSlides; i++) { (function() { var slideIndex = i; var slideLabel = i + 1; var x = $('<a id="slide' + slideLabel + '"href="#" class="paginatorLink"><i class="material-icons"></i></a>'); x.click(function() { TweenMax.to(".paginatorActive", 1, {css:{className:"paginatorLink"}, delay:0}); TweenMax.to("#slide" + slideLabel, 1, {css:{className:"paginatorActive"}, delay:0}); TweenLite.killDelayedCallsTo(nextSlide); TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} ); currentSlide = slideLabel; TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} ); TweenLite.delayedCall(stayTime, nextSlide); }); $('.pagination').append(x); })(); } });
  24. 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. Published: 2015-08-07 Google sparked an urgent and rather violent shift away from Flash technology when it announced that Chrome will pause "less important" Flash content starting as early as September 2015. Flash has served as the de facto standard for banner ads for more than a decade. Firefox also blocked Flash after major security issues were discovered and Facebook's security chief called for Adobe to kill Flash once and for all. Amazon says it will no longer accept any Flash ads after September 1. Clearly Flash is on its way out of web browsers. Advertisers can no longer afford its liabilities. Now what? Modern browsers are remarkably capable of handling slick animations natively using HTML, JavaScript, and CSS (collectively referred to as “HTML5” or just “H5”), making them the obvious choice as the tag-team successor to Flash. No more plugins. However, a few barriers are clogging up the transition. Some are technical, some are political, and some have to do with a glaring lack of information. Let's address things head-on, identify some solutions, and get things moving in the right direction. GreenSock has a rich heritage in the banner ad industry, serving as its most popular animation library in both Flash and HTML5. In fact, it’s one of the fastest-growing JavaScript tools on the entire Internet and it was originally born out of banner-specific needs. We obsess about animation in the browser, studying the technical challenges, performance benchmarks, and workflow. Consequently, we’re in a unique position to lend a hand during this transition and perhaps illuminate the path forward. 40 kilobytes? Are you kidding? Years ago, when bandwidth was a tiny fraction of what it is today, the ad industry codified a set of standards for banner ad file sizes. A common limit was 40kb (sometimes even 30kb) including all images, fonts, animations and scripts which Flash compressed into a single amazingly small swf file. Technically each publisher determines its own file size policies, but almost everyone looks to the IAB (Interactive Advertising Bureau) as a standards-setting body, like the W3C for web browsers. The IAB exists to help guide the industry but they don't mandate or enforce anything. When Flash ruled the banner ad landscape, certain file size specs were recommended by the IAB and the system worked well. However, the technology landscape has changed drastically. Bandwidth, page size, and banner budget over the yearsBandwidth (Mbps)Banner budget (kb)Page size (kb)2008200920102011201220132014201540kb33Mbps40kb1,795kb Year Bandwidth (Mbps) Banner budget (kb) Page size (kb) Jan 1, 2008 5.86 40 312 Jan 1, 2009 6.98 40 507 Jan 1, 2010 9.54 40 679 Jan 1, 2011 10.43 40 788 Jan 1, 2012 12.7 40 1081 Jan 1, 2013 15.62 40 1529 Jan 1, 2014 20.83 40 1622 Jan 1, 2015 32.78 40 1795 Page size (kb) Since 2008, average bandwidth has grown by a factor of 5.6 which is remarkably on-pace with the growth of the average web page size (5.7), but the IAB has been cautious about declaring HTML5 specs due to all the complexities involved. They released a set of HTML5 guidelines in 2013, but omitted any file size specs, saying only that HTML5 ads weigh "more" than swf ads. Without specs, many publishers clung to the safe limits of yesteryear. The gatekeepers who impose the 40kb budgets often do not have the authority or wherewithal to allow more than what the latest IAB spec dictates. Consequently, developers are forced to shoehorn HTML5 banners into archaic Flash specs which isn't what the IAB intended. This must change. From our vantage point, fear is driving the industry. Publishers and networks are afraid to raise the file size limits without IAB approval. Some do it anyway, but disagree on exactly how much, leading to wild variations. Developers have no choice but to build for the least common denominator in their ad campaign which is either totally unclear or ends up being the dreaded creativity-crushing 40kb. (UPDATE: The IAB released a draft of its new HTML5 specs.) HTML5 is fundamentally different...embrace that HTML5 banners often weigh 3-5 times as much as a Flash swf but far too many people myopically focus on the aggregate total file size. They miss the unique strengths of HTML5 technology that we should be exploiting - shared resources and browser caching. These have a tremendous impact on loading time and overall performance which is the whole point of the file size limits anyway! Flash compiled all assets into a single swf meaning that if 10 different banners on a site all used a certain library, it got baked into each and every swf. End users paid the file size price 10 times. Multiply that by millions of ads and it gets pretty crazy. In HTML5, however, a library can be dropped onto a CDN (content delivery network) and shared among all banners, thus end users only load it once and it’s completely "free" thereafter...for all ads pointing at that CDN...on all sites. This is a BIG deal. It means that common animation chores like the requestAnimationFrame loop, timing, sequencing, intelligent GPU layerizing, lag smoothing, compatibility workarounds, performance optimization, etc. can be extracted and shared among them all (much like what the Flash Player did for swf files). The unique banner-specific code can be much more concise, reducing overall load times and improving performance. File size limitations should be applied to the banner-specific assets, excluding the shared resources that drive common functionality. Imagine how silly it would have been if the 17MB Flash Player download was included in the aggregate file size for each swf banner. Ad networks and publishers can put a certain subset of tested-and-approved libraries onto their CDNs and exempt them from file size calculations. We're thrilled to see industry leaders like Advertising.com/AOL, Google DoubleClick, Flashtalking, and Sizmek already taking this approach with GSAP. This strategy allows developers to avoid burning hours manually cooking up their own proprietary libraries to fit within the ad specs. Ad networks and publishers win because load times (and costs) are lowered and it's easier to troubleshoot problems when a common toolset is used. They reap the benefits of all the compatibility and performance optimizations in tools like GSAP. End users get ads that perform better, load faster, and look more appealing. Animation technologies and approaches For those tasked with building HTML5 banners, the choices are perplexing. Is it best to use a visual IDE like Adobe Edge Animate, Google Web Designer, or Tumult Hype? Even Flash is capable of outputting HTML5 content. These tools can make building ads easier (especially for designers who don’t want to write code), but a common complaint is that the resulting output is bloated and slow, making them ill-suited for banner ads. Some networks explicitly state that they won't accept ads built with these tools. We'd love to see the visual tools mature and export concise, performant, ad-friendly code because plenty of designers aren't comfortable hand-coding banners yet. Ideally, they'd tap into GSAP under the hood so that designers and developers could collaborate on the same files without worrying about runtime redundancies. There are also network-specific banner-building tools but their proprietary nature makes them impractical for many campaigns. If an agency uses one network’s proprietary tool and then their client asks to run the ad on another network too, it must be rebuilt. Learning how to use each network's proprietary tool can be cumbersome. Hand-coded animations are usually much lighter-weight, performant, and universally accepted, but building them requires a particular skill set. And which underlying technologies should be used? CSS animations? jQuery? GSAP? CreateJS? Once again, answers vary wildly among ad networks and publishers. The goal of this article isn't to provide an in-depth review or comparison of the various tools. Each has its own strengths and weaknesses, but let's briefly touch on some of the major runtime animation technologies: CSS transitions and CSS animations - these are supported in all modern browsers, but not IE9 or earlier. They're cheap from a file size standpoint and they perform well. For simple animations like button rollovers, they're great. However, file size rises quickly and things get cumbersome when you attempt even moderately complex animations. Simply put, they will take longer to build, they won't work in some older browsers, there are bugs (particularly when animating SVG elements), and certain tasks are outright impossible. Additional reading: https://css-tricks.com/myth-busting-css-animations-vs-javascript/ and http://greensock.com/transitions/ and https://css-tricks.com/svg-animation-on-css-transforms/ jQuery - it was never intended to be a robust animation tool, so jQuery suffers from poor performance and workflow issues. Most ad networks strongly advise against using it. GSAP is up to 20x faster. Additional reading: http://greensock.com/jquery/ CreateJS - Adobe Flash can optionally export to this canvas-based library. You can't just publish existing Flash banners to CreateJS (you must do some conversion work and leverage JavaScript instead of ActionScript) but for designers who are already used to the Flash interface, this can be a boon. One down side to canvas-based libraries is that you lose accessibility (the browser sees it as essentially a blob of pixels), but that's probably not a top priority for banners. File size can also become a concern (possibly mitigated by CDN standardization). You can use GSAP to animate CreateJS content. Additional reading: http://createjs.com Zepto - like a lightweight version of jQuery that uses CSS transitions under the hood for animations. Zepto is better than jQuery for banners, but it suffers from similar workflow issues as well as the inconsistencies/bugs inherent in CSS transitions/animations (like with SVG transforms). Active development seems to have stalled. Additional reading: http://zeptojs.com Web Animations - a new spec being worked on that has a lot of promise, but it just isn't a realistic contender at this point because it is in flux and several browser vendors remain noncommittal about ever supporting it. The polyfill has performance problems. Additional reading: http://w3c.github.io/web-animations GSAP - Widely recognized as the performance leader, GSAP solves all kinds of real-world animation problems from browser inconsistencies to workflow headaches (far too many to go into here). The Flash banner ad community is full of designers and developers who use GSAP daily, making it much easier to transition to HTML5; no new syntax to learn. Ongoing development and support have a solid track record for over 7 years. Additional reading: http://greensock.com/why-gsap/ Recommendations Based on our experience and the results from our survey, we suggest the following: Standardize a few JavaScript libraries Ideally, the IAB would equip the community with a short list of recommended libraries that get CDN-ified and exempted from file size calculations. Historically, the IAB has been extremely reluctant to officially endorse any third party tools. That's understandable - it could be seen as playing favorites or unfairly excluding someone's favorite library. However, without specific recommendations, the HTML5 landscape is so fractured and complex that it will result in a free-for-all (which is basically what it is now). The IAB can set the tone and move the focus away from aggregate total file sizes and into the modern era that leverages shared resources and browser caching to deliver excellent performance. It is imperative that this list of "recommended" libraries be very short, otherwise the caching impact will be diluted. The IAB can run their own independent tests and look at performance, features, compatibility, support, workflow benefits, and overall industry demand to determine which libraries get recommended. Of course we feel strongly that GSAP belongs on that list because: It is the top performer. It has widespread industry acceptance, both in Flash and HTML5. It's recommended by Google, used by the biggest brands in the world, etc. It is framework-agnostic, super flexible and robust, able to animate anything. It is professionally supported, yet free to use in banner ads. Modernize file size specs Given the 5.6x growth factor of bandwidth and page size since 2008, it seems entirely reasonable to adjust the old 40kb limit to 200kb (5x) for the modern HTML5 era. This is entirely consistent with some in-depth testing that has been done recently aimed at identifying the file size threshold at which real-world users perceive a dip in performance. The results showed that the threshold was upwards of 250kb. Combined file size isn't the only issue that contributes to slow load times; the number of server requests can have a significant impact. A single 300kb file can often load faster than 200kb split among 20 files. HTML5 banners can't realistically mash everything into one file, though. Doing so would kill the benefits of caching and resource sharing. So a reasonable compromise seems to be a 10-file maximum. Sprite sheets can be used to combine images. Given all the factors, we'd recommend the following for standard (non-rich media) ads: 200kb combined total (gzipped) Maximum of 10 files. Any additional must be loaded "politely" (after the parent page finishes loading) Shared CDN resources like GSAP don't count toward these totals. Some have suggested slicing the 200kb standard limit into two parts - a 50kb initial load, and then the rest "politely" loads. However, we advise against this for standard (non-rich media) ads because it unnecessarily complicates the design and production process as well as QA and enforcement. Rich media ads will likely require more files and kb than the limits mentioned above, and those should be polite-loaded. By "rich media", we mean ads that contain video or expand or perform API calls (like feeding the viewer's zip code to a backend script), etc. Update documentation and guidelines It is surprisingly difficult to get answers to some of the most basic questions when preparing a banner ad campaign for even the biggest networks and publishers. What are the file size limits? Which libraries can be used? Do CDN resources count against the total file size? Is there a network-specific CDN link for common libraries? Online docs either have outdated information or none at all related to HTML5. Drop support for IE8 Legacy IE support is not just painful for developers, it's exceedingly expensive for advertisers. Certain effects are outright impossible, so creatives must learn about the IE8 pitfalls and adjust their designs. Developers are forced to rebuild entire portions, implement workarounds and perform extra testing, all to accommodate a tiny fraction of the web audience who probably don't represent the demographic that advertisers are targeting anyway. This was never an issue for Flash, but it's a HUGE issue for HTML5 because it relies on native browser technologies that are absent from older browsers like IE8. Our recommendation is to draw a line in the sand and drop support for IE8 for sure, and potentially even IE9. Consider SVG instead of iframes Displaying ads inside an iframe is nice for security, but it forces ads into a strict rectangular space (ruling out fancy overlays with transparency/mask effects that show the main web page behind) and there's a performance price too. SVG is widely supported and it has some excellent transparency/masking capabilities, plus it can serve as a single container for an entire ad (see Chris Gannon's blog post and video)! Further testing needs to be done to better understand the performance and security implications, but it certainly seems like a worthwhile contender. Create a gallery of sample banners and templates Rather than pouring over specs and instructions and then building something from scratch, most developers prefer to analyze banners that already conform to the standards and use one as a template for their own project. Each network has different API's and ways you must track clicks, etc., so it would be lovely if each one provided a gallery of demos at each standard size. Codepen.io is a great place to host a collection because it's so easy to see (and edit) the HTML, CSS, and JS as well as the result all in one place. Developers can simply click the "fork" button and start producing their own version of that banner immediately in the browser. Codepen even integrates nicely with crossbrowsertesting.com for easy QA. Adjust client expectations As the industry transitions from Flash to HTML5, clients must be made aware of the design, budget, and schedule implications. HTML5 banners take more time to produce and test, therefore they will be more expensive. Plus there are certain effects that were easy in Flash but are virtually impossible in HTML5, so creative expectations need to be adjusted as well. Common GreenSock Questions With the broader discussion out of the way, let's narrow our focus to GreenSock for a moment and address some of the most frequently asked questions: Which networks support GSAP? All networks that we're aware of allow GSAP, and most even exempt its file size from the ads and host it on their CDNs. Google DoubleClick recommends GSAP for complex animations. Here's a breakdown of how some of the major players stack up: Allows GSAP Excludes GSAP from file size calculation* Hosts GSAP on CDN Advertising.com/AOL YES YES YES Google DoubleClick YES YES YES Flashtalking YES YES YES Sizmek YES YES YES Flite YES YES YES Cofactor YES YES YES AdWords YES YES YES *Unless publisher objects which is uncommon TweenMax is too big! Where's TweenNano? Let's face it: TweenMax (the most robust tool in the GSAP suite) is overkill for many banners that are only doing simple fades and movement. Wouldn't it be smart for GreenSock to create a super-small animation engine that's targeted at banners and only has the basic features? In the Flash days, we did exactly that and called it "TweenNano". It weighed about 2kb. On the surface, it sounds like a great idea but there are several reasons we avoided TweenNano in the HTML5 toolset: Caching - this is the biggest factor; loading the JavaScript file is a one-time hit and then the browser caches it, mitigating the entire loading issue on every page thereafter. Realistically, TweenNano must include a subset of TweenLite and CSSPlugin features and weigh at least 8kb; how much longer would it take for the average user to load an extra 25kb for TweenMax? It's not even noticeable (less than one second). So it doesn't seem like a worthwhile tradeoff to rip out all those features just to gain a fraction of a second only the first time it loads, especially for banners where caching and resource sharing could be used so effectively. If networks toss TweenMax.min.js on their CDNs, it effectively becomes "free" (zero load time) very quickly, giving them instant access to all the timeline tools plus a bunch of advanced plugins. Thus it seems smarter to press the full-featured, super-fast TweenMax engine into service rather than a sliced-down TweenNano with limited effects. Performance - GSAP has been engineered with a huge priority on performance which sometimes comes with a file size tradeoff. We could accomplish the same tasks with less code in places, but runtime performance would suffer. We feel strongly that when it comes to animation, it's wiser to pay a small up-front kb tax (only a fraction of a second in most cases) in order to get maximum runtime performance. Animations must look smooth and conserve battery power. Think of it this way: would you rather buy a computer that boots up 2 seconds faster or one that's 30% faster all the time (after it boots)? Flexibility/Creativity - what if you want to animate a non-essential CSS property like boxShadow or slide along a curve or scrub through a timeline? Even if there's just one part of your banner that needs a more advanced feature, it presents a dilemma. Creativity is hampered. Again, the fraction of a second one-time cost difference for TweenMax seems well worth it for the added flexibility and peace of mind. API confusion - years ago, Adobe created a lightweight version of the Flash Player dubbed "Flash Lite" with similar aspirations (bake only the essentials into a lighter weight flavor), but it was a complete failure. One of the problems was that developers couldn't remember which features were available in the regular Flash Player versus Flash Lite. Likewise, TweenNano's feature disparity would create some confusion/frustration. What about creating a tool that lets users select only the features they need, and then it spits out a customized stripped-down version of TweenMax? Again, this sounds appealing, but it would likely lead to worse load times because instead of having one common TweenMax that gets shared and cached, every banner would have its own different (and partially redundant) flavor to load. Ultimately, we're committed to delivering the tools that are needed most, so if the broader industry decides not to leverage shared resources and publishers insist on sticking to all-inclusive aggregate file size totals, we're open to creating TweenNano. Luckily, it looks like there's excellent momentum behind TweenMax getting CDN-ified and exempted from file size limits. In our opinion, that's definitely the smartest approach. What's so special about GSAP? It's beyond the scope of this article to explain all the benefits of using GSAP; see http://greensock.com/why-gsap/ for a summary. If you're still wondering what the big deal is, we'd encourage you to find someone who is proficient with it and ask about their experience. Usually people who take the time to learn it have a "light bulb" moment pretty quickly and never want to go back to using other libraries or CSS. It's difficult to explain to the uninitiated - lists of features don't really do it justice. It's not merely about performance (although that's a biggie) - it's about feeling empowered to animate almost anything you can imagine with minimal code. Do I need a commercial license to use GSAP in banner ads? GreenSock's standard "no charge" license covers usage in banner ads even if you get paid a one-time fee to produce the banners. We fully encourage the use of GSAP in banner ads and beyond. You may want to check out Club GreenSock for some bonus plugins that allow you to easily achieve advanced effects. Is anyone building a GUI for GSAP? A visual tool for building GSAP-based animations is a popular request, and we have been approached by several large and small companies about the possibilities, but there's nothing rock solid to report yet. We hope that companies like Adobe and Google will offer export options from their tools that leverage GSAP as the runtime engine and produce well-formatted, concise code. There's a pretty neat tool called Animachine that's in alpha and can be installed as a Chrome extension. It shows promise, but isn’t entirely stable at this point. There are also several online GSAP-based banner builders: http://html5maker.com/, https://tweenui.com/, and http://www.loxiastudio.com. Where can I get GSAP training? You can have GreenSock come directly to your organization and sit with your team to get them up to speed quickly. We can even convert one of your Flash banners and then teach you how we did it which is an excellent way to learn banner-specific tricks. The Q&A sessions are invaluable. We have limited slots available, though, so contact us as soon as possible to get your event scheduled. There are plenty of other learning resources available: GreenSock's getting started video/article GreenSock's learning resources New GreenSock eBook (published by Noble Desktop) Lynda.com course ihatetomatoes.net course (intermediate/advanced) Noble Desktop class in NYC 02Geek course Egghead.io The GreenSock forums are a fantastic place to not only ask your question(s), but also poke around and see what others are saying. It's one of the best places to learn even if you never ask a question. There are plenty of demos on codepen.io as well. For inspiration, we'd suggest following these people: Chris Gannon Sarah Drasner Petr Tichy Sara Soueidan Diaco.ml Blake Bowen Ico Dimchev UPDATE: The IAB released a draft of its new HTML5 specs and is soliciting public feedback before finalizing the document. The outstanding news is that they agreed with our assessment regarding a 200kb limit for standard ads. The IAB is expected to release an update to its HTML5 Best Practices guide soon which will likely contain a short list of JavaScript libraries that are recommended for exemption from file size calculations. We're confident GSAP will be on that list. #network-support { border-spacing: 1px; border-collapse: separate; background-color: #ccc; width: 830px; line-height: 1.1em; } #network-support thead td { background-color: #333; color: white; } #network-support td { text-align: center; vertical-align: bottom; font-family: Asap, Arial, sans-serif; padding: 10px 14px; background-color: white; } #network-support .network { text-align: left; font-weight: bold; } #network-support .yes { background-image: url(/wp-content/themes/greensock/images/licencing-check.png); } #network-support .yes, #network-support .no { background-color: white; background-repeat: no-repeat; vertical-align: middle; background-position: center center; background-size: 35px 35px; color: transparent; } .disclaimer { font-size: 11px; color: #777; padding: 2px; }
  25. I was wondering how do you detect that GSAP is loaded into the DOM and ready to animate the banner? DoubleClick provides you with this in their example of polite loading a banner, where the JS and CSS is loaded later into the DOM. <script src="http://s0.2mdn.net/ads/studio/Enabler.js" type="text/javascript"></script> <script language="javascript"> //Initialize Enabler if (Enabler.isInitialized()) { init(); } else { Enabler.addEventListener(studio.events.StudioEvent.INIT, init); } //Run when Enabler is ready function init(){ if(Enabler.isPageLoaded()){ politeInit(); }else{ Enabler.addEventListener(studio.events.StudioEvent.PAGE_LOADED, politeInit); } } function politeInit(){ //Load in Javascript var extJavascript = document.createElement('script'); extJavascript.setAttribute('type', 'text/javascript'); extJavascript.setAttribute('src', Enabler.getFilename('DCRM_HTML5_inPage_Polite_300x250.js')); document.getElementsByTagName('head')[0].appendChild(extJavascript); //Load in CSS var extCSS=document.createElement('link'); extCSS.setAttribute("rel", "stylesheet"); extCSS.setAttribute("type", "text/css"); extCSS.setAttribute("href", Enabler.getFilename("DCRM_HTML5_inPage_Polite_300x250.css")); document.getElementsByTagName("head")[0].appendChild(extCSS); document.getElementById("container_dc").style.opacity=1; document.getElementById("loading_image_dc").style.opacity=0; document.getElementById("container_dc").style.display = "block"; } </script> But I found that when I added GSAP to this, my code would always load first then fire off and not wait for GSAP to be ready. So a dug a little deeper into DC's Enabler.js and found they actually had a loadScript function with call back. <script src="http://s0.2mdn.net/ads/studio/Enabler.js" type="text/javascript"></script> <script language="javascript"> var TweenLiteJS = false, CSSPluginJS = false, EasePackJS = false; //Initialize Enabler if (Enabler.isInitialized()) { init(); } else { Enabler.addEventListener(studio.events.StudioEvent.INIT, init); } //Run when Enabler is ready function init(){ if(Enabler.isPageLoaded()){ politeInit(); }else{ Enabler.addEventListener(studio.events.StudioEvent.PAGE_LOADED, politeInit); } } function politeInit(){ Enabler.loadScript('//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenLite.min.js', function(){console.log("TweenLite Loaded"); TweenLiteJS = true;}); Enabler.loadScript('//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/CSSPlugin.min.js', function(){console.log("CSSPlugin Loaded"); CSSPluginJS = true;}); Enabler.loadScript('//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/easing/EasePack.min.js', function(){console.log("EasePack Loaded"); EasePackJS = true;}); Enabler.loadScript('script.js', function(){console.log("BannerScript Loaded"); Banner.init();}); //Load in CSS var extCSS=document.createElement('link'); extCSS.setAttribute("rel", "stylesheet"); extCSS.setAttribute("type", "text/css"); extCSS.setAttribute("href", Enabler.getUrl("styles.css")); document.getElementsByTagName("head")[0].appendChild(extCSS); document.getElementById("banner").style.opacity=1; document.getElementById("loading").style.opacity=0; document.getElementById("loading").style.display = "none"; document.getElementById("banner").style.display = "block"; } </script> So I ended up with this in the HTML and then this in the JS Banner.init = function(){ //Just an extra check to make sure all library files have loaded as well. if (document.readyState === "complete") { if( !TweenLiteJS || !CSSPluginJS || !EasePackJS) { console.log("Not ready to animate yet, try again in 500ms"); setTimeout( Banner.init, 500 ); } else { console.log("Animation start"); Banner.animate(); addListeners(); } } } And it works, the animation isn't fired off before its ready to. I was just wondering if I've over complicated things, or I've missed something. I actually got this idea from @letssock when talking about implementing GSAP into Celtra.
×