retropunk

Take a look at Google Web Designer. A few devs I know use it and get excellent results From what I understand the animations are all exported as CSS once you publish. The devs I know that use it are skilled in animation as well. It's worth a look.

Hey guys, with Animate and CreateJS I found that using the stage.enableMouseOver() a bit laggy even if you bump of the rate. Check out the template in this thread where we use Animate CC and GSAP together. There are 2 Profile templates for Standard and Rich Media DC Banners http://greensock.com/forums/topic/13774-animate-cc-gsap-starter-file-needed/#entry58050 Depending on how you need the cursor to perform this may or may not work for you. In most banner cases this template should serve you fine. Take a look and let me know how it works for you Good luck - Patrick

For Banner Ads we are working on a slightly different approach using the Publish Profiles feature in Animate CC. I had answered a similar post in a different thread http://greensock.com/forums/topic/13774-animate-cc-gsap-starter-file-needed/#entry58050 Take a look and let me know how it works for you Good luck - Patrick

You can do it like this too. No jQuery needed. TweenMax.staggerTo( '.dot', .5, { y:-12, ease: Power1.easeInOut, yoyo:true,repeat:-1 }, 0.15 );

Interesting flysi300 - I'd be interested in hearing how they measure this and if it is truly part of their testing environment. We do lots of banners and the FPS is no longer part of the spec. Maybe some cranky old PM that just learned how to use Chrome Dev Tools...

Hi, have you tried the new version of Animate CC (previously Flash Pro) ? If not you should try it right away. As a Flash user I think you will be very happy with Animate CC. Tons of new features, text to outlines is one of them. No more keeping copies for future editing. Take a look asap! - Patrick

be careful with those trailing commas. When I work in "use strict" mode the commas would error out. Also, like flysi300 said you don't need to wrap the CSS anymore. t1.from(h, 2, { marginTop: 400, opacity: 0, ease: Bounce.easeOut }); t1.from(para, 2, { marginTop: 400, opacity: 0, ease: Bounce.easeOut }, "-=1.3");

is there any way you can pair down your example? There seems to be a whole lot going on and for someone unfamiliar with your idea it can be difficult to debug and make suggestions.

Yeah the file I shared is from an idea we are working on to standardize banner production. We do a lot of DOM creation too but being able to build canvas ads in Animate CC with GSAP is just excellent. When I can combine timeline animation with coded animation its a perfect day. Using Profiles in the Publish Settings of Animate CC makes it simple to modularize typical parts of a banner. Who remembers digging around in the Flash Configuration folders in order to customize the HTML wrapper (blurghh)...so happy to see something like this come along. This feature will be huge for people once they wrap their head around it. Concerning the clickTag code - in my experience with Standard Banners, as long as the clickTag vars are in the Global Scope you're good. I keep all my other JS wrapped in a closure or a nice Module Pattern...yummy I also don't like clogging up my divs with JS clickTag code even if it is small. Just my preference. I am hoping expand and improve templates like this for banners, apps, sites etc... I have another template I am working on that uses PixiJS for sprite sheet animation and certain particle effects. I know OSUblake will appreciate it. I will share that too when its ready. I'm can't tell you how excited I am to see Animate CC and GSAP (and many other frameworks) working so nicely together. It's gonna be a kickass year!

SnapSVG Animator is from CJ Gammon https://github.com/cjgammon/SnapSVG-Animator In Animate you can only do timeline animation at the moment. No timeline code. I'm sure you could add GSAP code once the SVG is published. Certainly worth looking into. This is marked as active development but it's been quiet for a minute. Check out the examples in GitHub - Patrick

The retina snippet needs some refactoring but it does work. I'm sure someone smarter than me will edit the code and post it for us

Yeah I had the blurry issue but this takes care of it. The file I attached has that in the profile settings. It could always be tweaked though.

Hey guys, we have been experimenting with Animate CC and GSAP. It's been a lot of fun. Feels like the old days. I'm attaching a starter template for a banner that also shows a few other things. Using GSAP with Animate CC is awesome. Publish Profiles Check the Publish Settings > Profile You will see Standard and Double Click RM. This allows you to customize the HTML wrapper for the project. You can then go under the Advanced tab and export a profile to create your own and then import it. Ideally you would create templates with profiles. it has already sped up production for us. For banners its best practice to keep all assets in the same folder. In Publish Settings you can set the Export Image assets to ./ This keeps everything in the root. Not everyone needs this but when you do it's really helpful. Side note: We've talked to Adobe about merging the JS and JSON in the HTML file. If this happens it will really make Animate CC and GSAP the ultimate tool for creating banners again! Retina Export This is a simple script that allows you to take advantage of retina screens. It won't automatically res up your graphics but your text to text outlines will look nice and crisp. What we are doing right now is working at 100% but exporting the graphics at 2x and scaling them down in Animate CC. This is one technique...I'm sure there are other ways. Happy to hear what you come up with. Kevin Newman wrote a post about it a while back (2014). His code is more robust and he goes into more detail. Definitely worth the read Check it out In the attached file you will see imports for GSAP and some other goodies. Like defining the border outline and rollover/clickTag code. Of course you can easily use GSAP to animate elements on the stage. I have a timeline animation for the button but it can be whatever you want. Please let me know if you find this useful and please share back your profiles! Thanks guys! - Patrick BannerMaster.fla.zip

I wanted to show you something in case you weren't aware. You can use TweenMax.set when there is no need for a duration. I'm not sure what effect you are attempting but I wanted to show you a different way of doing the same thing sort of http://codepen.io/SnapToPixels/pen/KVLEeL?editors=0010 Good luck!

Welcome to the forum. GSAP is a massive library and could be daunting if you start cold. But don't worry this forum is one of the best around with some amazing contributing coders. Check out this previous post from Carl on this very type of animation http://greensock.com/forums/topic/11441-slotmachine-with-js-and-gsap/?p=46464 It shows a version of a slot machine by Chris Gannon that uses GSAP. Also, if you are new to GSAP check this out too. http://greensock.com/get-started-js Hope this helps - Patrick

Greensock is the ONLY bill I LOVE to pay every year! :) Thanks guys!

This is really great thread idea. I especially love to see how others tackle the same issues I come across everyday. Chris has a few SVG posts that I found useful. The Knockout Mask one was a good one. Looking forward to more posts guys. - Patrick

I definitely saw the video Carl did on pathDataToBezier but I totally forgot about it! Thanks for these guys...truly excellent

nice, the heart monitor effect is excellent! Thanks! I didn't realize there was a pathDataToBezier! Thats huge! Thanks so much - Patrick

Hey guys, so I am attempting this effect using the DrawSVGPlugin http://videohive.net/item/electronic-chipset-2/11212198?s_phrase=circuit%20board%20animation&s_rank=15 It's not bad so far but I am curious how I could go about finding the front and tail of the SVG element that is animating. This way i could have another element follow the path or trail behind it. Just wondering if anyone has tried anything like this. Thanks! - Patrick

Thanks for the hard work guys. I just came across an SVG optimization project that is perfect for GSAP. I am happy because it will allow me to show my team the power of GSAP and why GSAP should be in your toolbox. Happy Holidays!

Ha ha...I don't need to pump it up that much. But its comforting to know that I can. Your snow is nuts! Thanks for catching the rotation, I thought I removed that. I didn't realize the radians though. That will be useful of course. Pixi a monster library. I've been reading through the docs tonight and I am falling in love... Also looking at CloudKids GitHub again...things are getting serious around here. I appreciate the sharing. Simply awesome. btw - how did you do the shadow on the snowflakes? Or am I seeing things because I am sleepy? haha nevermind, I see it in the sprite Time for sleep Talk soon!

Just a quick update. I took Diacos above CodePen and applied the TweenMax code along with a Pixi renderer. http://codepen.io/SnapToPixels/pen/f62da3152b7cf640633fe734cdd4b184?editors=001 Thanks again for sharing links - P

yeah Starling is excellent. I use it with Feathers, Spine and GSAP to build AIR apps on iOS/Android. I've been working on a childrens book using these. It's so fun. Also Spine can be used with just about every popular framework. The particle engine I use with Starling is this one. It's for AS3 of course which seems to scare people these days. But if you do AIR like I do, it's brilliant. http://www.flintfabrik.de/pgs/starling/FFParticleSystem/ Here is the homepage https://github.com/shin10/Starling-FFParticleSystem

SWEET! Thats awesome! I dod remember you sending those links for CloudKid...definitely on my list. I have a Particle Designer tool from 71Squared but I don't recall if I can use it with Canvas. I bought it a long time ago to use with Starling. Thanks for that link...the UI is fantastic. I love the WebGL/Canvas toggle...simple love it - P