Jump to content


Bannertime tutorial/questions

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

I've read through all the documentation about Bannertime at https://bannertime.github.io/

It looks like a wonderful resource.

However is there anywhere where I can learn more about the actual development process of the banners? How do I use an smart object? Where do I input the configuration object? How do I use the preload code?

Any reference banner will be great!

Link to comment
Share on other sites

This is very vague and last I check, bannertime doesn't have a detail explanation on how their tool works.

is there anything specific that you are trying to do?


I have a clone of bannertime but use my own templates. The one tool that I had to get very familiar with, was gulp.

Link to comment
Share on other sites

That is what I mean.  Is there an explanation on how to use the Bannertime produced assets to implement the PSD design?

Link to comment
Share on other sites

I don't think there is a tutorial on how to use bannertime. 


The one thing I never used, was the smartobject. It just didn't fit the way I work.


As for the script loader, just add the script url that you want to use into the array and the politeLoad function will loop through it and add it to the head before anything in the banner runs or gets called.

Link to comment
Share on other sites

Totally understandable - Bannertime is a great tool, but the docs are pretty sparse.


SmartObjects are just normal JavaScript objects that you can use to create HTML elements. By default they will create <div> elements, but you can add a 'type' option and set it to 'img', for example, then give it a 'src' option, and it will generate an <img> tag for you. 


My workflow is usually like this:

- extract assets from Ps, Illustrator (or whatever format your assets are in), preferably @2x resolution.

- create SmartObjects in Bannertime - one object for each element that is going to make up the banner

- initialize object states in the setup() method - for example, hide elements that should be hidden when the banner loads, eg.

- start animating in the animate() method.


You don't have to worry too much about Gulp, unless you're doing some custom stuff (eg. adding your own tasks, etc.). When you're ready to deploy/deliver, just type 'gulp prod' at the command line and you'll get a folder full of zipped up banners, ready to deliver.


The one thing I wish were different, is the way backups are generated. You can generate backup images for your ads by typing 'gulp backup-gen' at the command line, but it automatically saves them into the /images folder for each ad, thereby adding to the final k-weight.



  • Image paths that you pass in to the "preload" section will be preloaded. If you want to limit the preloaded assets, just load the asset on-demand
  • You can group elements in a container div by creating an empty SmartObject and setting the child objects' parent to the container element
  • the properties of each SmartObject are basically css props, so you can pretty much add anything you would add to an element in css. Z-index, color, background-position, etc. Just make sure you use JavaScript format (eg. backgroundPosition, backgroundSize, etc.)

That's all I can think of off the top of my head at the moment - if you think of any specific questions, please, don't hesitate to ask!


EDIT: Thought of one more thing! Spend some time staring at the banner.js file - that's where the SmartObject is defined, and that will give you some hints as to all the features that they have. For instance, you can type something like myElement.set({autoAlpha: 0}), or myElement.centerHorizontal(), etc.

Edited by flysi3000
  • Like 3
Link to comment
Share on other sites

  • 1 month later...

To follow up on @flysi3000 explanation I wrote the tutorial how to use Bannertime. So if @emmanuelulloa and anyone else still has questions, come check it out:




I would appreciate input from @joe_midi one of the main contributors to Bannertime.  I'll keep this tutorial updated when new features come out.


  • Like 2
Link to comment
Share on other sites

This is great, @Gedas. Definitely tons of useful stuff in there, particularly calling out the helper functions, which I'm sure a lot of people miss. I might just have to fork my own version of the repo and make some custom templates. :)

Link to comment
Share on other sites

@Gedas Great work!


We know our documentation is bad! Sorry guys!


If anyone would like to help out with our docs, please write a pull request and we can merge it in.


As for bespoke templates, well yea, we've tried to keep the tool as minimal as possible, but we could try something like:

$ yo bannertime:template
? Which template would you like to use ?

Then maybe you could store and bespoke templates in a source folder and we can call that from a .yo-rc.json file in your user directory?



  • Like 2
Link to comment
Share on other sites

I think documentation is good and easy to follow, that's why I didn't go into how to set it up. But it was missing how to make use of all Bannertime features and guidance using smartObjects.


As for templates, I like your idea!

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.