joe_midi

Not sure if this should be Flash or JS, but its a crossover project. I've recently been working on a big campaign, that uses a large amount of character animations, and our team was using a mixture of Flash and After Effects to achieve these great animations. Then came the mobile placements, and I found that the actual delivery platform itself had no support for canvas or easelJS and barely any SVG support. So I ended up creating spritesheet animations using CSS and manually setting up frame by frame animations in Illustrator, the problem was now that these animations didn't match what the rest of the team was doing in Flash. So I looked into exporting the spritesheet from Flash itself so it would capture frame-by-frame movements, but the issue was Flash Spritesheets place the character in an X and Y fashion, rather than all being on 1 line. I played around with a Codepen to make it work and used the onUpdate ticker to make it work with an array of all the possible background positions. Then I thought, why not make this an export option straight out of Flash? Its a little work-in-progress, but I hope this gives an idea of what I wanted to achieve. It just exports out a HTML page that uses GSAP to animate the background position from an array dataset. https://gist.github.com/joemidi/87168087b5c0eae36e86#file-gsap-spritesheet-plugin-jsfl

Ah, I wish I saw this post before I started my other discussion. If those were recommendations, what were the actual issues for it failing? Did they specifically point to the externally hosted JS files? I would also mention that DC QA is made up of a whole bunch of teams that don't always talk to each other, so you'll find banners being passed by one guy, don't get passed by the next. Also if you don't already have access, request access to the Live Chat support. Always more helpful. Google Web Designer, yes you can use Greensock if you wanted to, but you would still be writing out the JS yourself. This would be more similar to the Flash scenario of placing all your movie clips on the stage, and then writing an external AS file with GSAP to animate it all. The animators/flash designers would then be able to change copy and images with different items, but the animation would stay the same. Another point would be for all of us to join the GWD community forum and lobby for them to get GSAP as the animation engine, or the option to. Also I believe someone mis-interpreted DC's recommendation on minifying JS files. JavaScript files require a .js extension, not .min.js. If you minify JavaScript files, you can't add tracking easily. If the client requests minifying, add tracking first and minify the .js file later.To me this reads that you can minify but always have a backup of the original JS otherwise if your client wants to add some tracking in there, that would be difficult. (But if you're using a Grunt setup, then you probably already have source/build folders and can easily make changes as you want.) I also believe you just can't upload .min.js files, but they could still be minified, just with the .js extension. I'm half sure I've tested this, but I haven't done this in a while. I am currently working on mobile banners in Celtra, and chucking out all their animation tools in favour of writing it all with GSAP as I wasn't happy with the performance difference between Android and iOS devices.

Hey Greensock peeps, I wonder how many of you have put a greenstocking over the fire place yet? So, my first experience with GSAP was with banner ads in Flash, and now I've graduated from Flash and moved onto HTML5 banner ads (That means I get to work on annoying you on your phone and tablet, YAY!). I wanted to find out how many people here have been using GSAP for their HTML5 banner ad production? I've also been using an Ad Platform named Celtra recently, which has its own very rudimentary animation system, no where near as flexible as GSAP but they have nifty components for Video and other interactions built for mobile. BUT! It has taken me a whole day to actually get my head around implementing GSAP within their platform. (everything is heavily sandboxed, so you can't bring down their system I guess?). And I wondered if anyone else here was doing something similar.

Anything on this? Been playing around with Adobe ExtendScript, and thinking getting GSAP involved would be awesome.

Hey Rodrigo, Cheers for all your help. Yes, I found the code reverse array thing just after I posted that codepen. But sometimes my mind doesn't think of things quick enough and I end up writing things just to get it working. I didn't use a call back tho. .staggerTo(buttonArray.reverse(), 2, {bezier:{type:"soft", values:[{x:0, y:20}, {x:0, y:0}]}, ease:Quad.easeInOut}, 0.05); I just added the reverse() to the target element, seems to work fine. I don't know if you have any suggestion as to why I shouldn't do it that way tho? Also found that reversing the array fixed most of the motion issue, so it was actually staggering from the correct direction.

I may of played around with it a bit more than when I originally posted the question. I feel that the last part of the animation: Line 10: [From left to center] .staggerTo(revButtonArray, 2, {bezier:{type:"soft", values:[{x:-250, y:-80}, {x:0, y:20}, {x:0, y:0}]}, ease:Quad.easeInOut}, 0.05); To me it doesn't flow as smoothly as it does when its animating through Line 9. [From right to left] I guess my question is really, are there any tutorials on working with bezier curves with GSAP? For the most part the I really like the animation. I just feel that the last animation isn't following the correct arc. But I can't figure out the values I would need to get it right.

Hey guys, I'm a complete noob when it comes to animating along bezier curves. (I've never needed to use it until today). http://cdpn.io/synLJ I've got 6 circles dropping down and swinging to the right and then the left. I'm happy with what I've got up until that point. However when I want it to sit back in the starting point. I can't quite get it to look okay. Anyone got any tips? Or know of tools that I could use to get the right values? Cheers guys!

Ah okay cool, Makes a lot more sense now!

Hey Rodrigo, Thanks for your quick reply. I tried out your code, but it seems that I'm missing something. (It's probably something _really_ obvious, but I can't see it). I created a codepen of it here: http://cdpn.io/omsrL If you could show me a little more, that would be great.

Massive n00b question, But I just couldn't figure it out. How do I tween a blur filter in GSAP? Thanks in advance!

Thanks Bassta, Looks really simple and easy to use for basic banner work.

Hey guys, I wanted to find out whether there are any other animation apps for html5 that uses a timeline other than Adobe Edge, that I could check out? Animating using GSAP is great, but sometimes I like to have things on a stage to manipulate and test to see how things should be moving, before jumping in to the code. Or say your business director wants something by the end of the day to show his client, and you quickly want to prototype something. What are your workflows like?

Maybe you could use this as a starting point: http://jsdo.it/yokotak0527/75dO

That sounds like a very useful app! Could also use it for backup gifs etc. What I created with sprites was a very simple, but very long road map kind of thing. And I used a single PNG sprite sheet with straight road sections and turns, and then used a bunch of divs and css to lay it all out. I think I'll take it as it comes, and make the decisions as a case by case basis. (I actually just got handed a HTML5 banner project that uses GSAP, totally made my day).

I've replicated some complex ads using TimlineLite/CSSPlugin and straight Javascript, and managed to keep everything (except CSSplugin) under 30kb. (Original swf was 50kb). Theres no reason to use Zepto/jQuery if I'm not doing anything that can't be written in straight Javascript right? I've also just seen this post which is a real +1 for me, as it seems to me that a lot of publishers will look to DC for guidelines as their either use a DC server, or just want to be industry safe. That being said, another ad serving platform I work with send out their templates as Edge Animate projects. @bassta thanks for your breakdown, I think I will probably use that as a rule of thumb, when I make decisions on how to build a HTML5 ad. Its pretty much the same as when I'm given projects in Flash that are keyframed. And I need to think "Is it better to keep it as it is, or recreate it all with greensock. What's the expected turnaround time? is it easy to adapt as it is, or will converting it save time in the future?" I also find CSS transistions weird, they don't really make sense to me. I feel that animations should be done via script and not style. But hey, you can't blame the tools right? Also, would you recommend using sprites? Or just have several images? I know some ads get bundled as a download e.g., to Apples Newsstand, in cases like that it doesn't really matter, right?. But if the ad is online, and to reduce the amount of GET requests needed to show all the ads elements. Or would there be too many issues with cross browser compatibility?

Hey guys, This is my first time posting on here, and I hope to post on here more often in the future. I've been an avid user of AS3 Greensock for a long time, and I've only recently begun to use Timeline. I'd like to start building some animated ads for the iPad. I know that most ad providers suggest to use Zepto.js for DOM manipulation, but I'd rather use GSAP as I'm more familiar with the construction and syntax of the tweens. I was wondering if anyone on here had produced iPad ads for publishers who normally recommend Zepto?