Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
azuki

creating GSAP banners without multiple files?

Recommended Posts

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 post
Share on other sites

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 post
Share on other sites

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:

 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 post
Share on other sites

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 post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×