Share Posted March 20, 2014 Hi GSAP team, I need to create several display banner ads and would prefer to animate them using GSAP. However, the only animation file format that is accepted is Flash AS 2.0. While I can design the banners in Flash, which would be a single SWF file deliverable, I'd like to know how the rest of the community creates and delivers GSAP banners? From my experience, the basic animation would be a single GSAP html file using in-line CSS styles and referencing the greensock library hosted somewhere... Is that right? Any insight on this would be very much appreciated! thanks! Link to comment Share on other sites More sharing options...
Share Posted March 20, 2014 Hello azuki, Here are examples of GreenSock banners I found on codepen: See the Pen lEiAv by GreenSock (@GreenSock) on CodePen See the Pen bpezc by GreenSock (@GreenSock) on CodePen See the Pen Fqmsa by GreenSock (@GreenSock) on CodePen Also if you only have your code on one HTML page you could do the following. Example of code below: See the Pen oAhsm by jonathan (@jonathan) on CodePen <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style> #wrapper{ position:relative; width:100%; height:200px; margin:50px; } #box { position:absolute; width:100px; height:100px; background:#CC0000; } </style> </head> <body> <!-- HTML CONTENT GOES HERE --> <div id="wrapper"> <div id="box"></div> </div> <!-- SCRIPTS GOES HERE OR IN HEAD --> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/TweenMax.min.js"></script> <script> // rotates box 360 degrees back and forth forever var $box = document.getElementById("box"); TweenMax.to($box, 2, {rotation:360, repeat:-1, yoyo:true}); </script> </body> </html> As you can see all HTML, CSS, and JavaScript is all on the same page. I would opt for using the style tag to put your styles in so to keep your HTML markup and CSS styles cleaner. Does this help? Link to comment Share on other sites More sharing options...
Share Posted March 20, 2014 Hi Azuki, How your ads are packaged really depends on who is publishing / distributing them. Most publishers understand that an HTML ad has many components: images, html, css and JavaScript. From what I've seen the most common approach has been to provide a zip of a single folder containing all these assets. For the GSAP files like TweenMax.min.js it may be allowed to link directly to the CDN we use: <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/TweenMax.min.js"></script> or elsewhere. Again, a lot of this depends on the company you provide your ads to and there really isn't a standard practice as of yet. Link to comment Share on other sites More sharing options...
Share Posted March 27, 2014 Hey azuki, You have to take a look at our banner maker tool! It uses GreenSock and all the js/css is inlined into one file when you use our ad serving feature. Check it out at tweenui.com/animator and let me know what you think! Regards, Erik Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now