Jump to content
Search Community

creating GSAP banners without multiple files?

azuki test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
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 comment
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 comment
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.
×
×
  • Create New...