Jump to content
Search Community

HTML5 Banner Preview Tools / Library

thunderbeast 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, I'm looking to find an elegant and simple way to preview html5 banners for clients. The situation is that we have Project Managers running multiple projects each with different developers, and they need a common way to show the client work-in-progress, ideally with our company brand. Instead, so far I've seen HTML files either hand coded our output to HTML using Swiffy, which each produce a full html file. 


I am looking for something simple that a PM can get from a developer and either drop-in or upload to a tool like Wordpress, so they can easily create a preview page with multiple banners (or links to banners) in a consistent manner.


Anyone out there have experience in this area? Having PMs hand code HTML pages, or using more advanced features of WP is....less than ideal.


Appreciate the insight!

Link to comment
Share on other sites

I actually have such a system but it is not ready for the public yet, however if your interested in being a part of it or testing PM me.

Hey, could you elaborate on this?  You have something that's set up to upload zips and it automatically add them to a preview site?  That sounds pretty awesome!


I always just set up a page where you can click the title of each ad and then it displays in an iFrame; I reuse the same "template" but I have to update it manually.  I'm curious what others have been doing.

Link to comment
Share on other sites

  • 1 month later...
  • 1 month later...

I'm currently developing that tool. Easy uploading HTML5-banners, and share with your clients.

But also: previewing on websites and easy feedback annotation.

Please send me a DM to get notified when it's ready, or sign up at www.adpiler.com

Plan is to launch within 2 months from now.


If you have any feedback: happy to hear!

  • Like 2
Link to comment
Share on other sites

Looks pretty cool, jorrit. Question: does it work for ads that are NOT using GSAP? Do you provide scrubbing capabilities while previewing? (I imagine that'd be impossible if the ads aren't build on GSAP). 


I'm not sure what you exactly mean with 'scrubbing capabilities', but Adpiler will work for all image- and HTML5-banners (using GSAP and not using GSAP).

Link to comment
Share on other sites

Yep, by "scrubbing capabilities" I just meant having a scrubber that you can drag back and forth to control the animation (like a virtual playhead). It's pretty simple to set up as long as the animation is using GSAP. Can't do it for CSS animations or pretty much any other library (at least not that I know of). 

Link to comment
Share on other sites

Well, mo.js has a player/scrubber now...

See the Pen RRRgLq by sol0mka (@sol0mka) on CodePen



Talking about Scrubbing capabilities:


I found this gem: https://www.npmjs.com/package/anim-panel


I particularly like the settable in/out points: 

See the Pen rLQxaY by cmalven (@cmalven) on CodePen


It literally took me 10 minutes to figure out how the in and out worked. Would've helped if they were draggable instead of setting them based on the playhead.


Here's another scrubber...



And this fork...




See the Pen 4941e9f3580d7b338fd7f1b20274585d by osublake (@osublake) on CodePen

  • Like 3
Link to comment
Share on other sites

I built one a long time ago for Angular. Most of the code inside the playback.service.js file could work without Angular. You'd just have to change a couple of variables. The keyboard layout is setup for use with the number keypad.



For a scrubber, I would use Draggable instead of nouislider. Here's one of the first things I ever made with Draggable, a min/max slider. There's a couple of things I would probably do differently today, but it still works great!

See the Pen ifomn?editors=0010 by osublake (@osublake) on CodePen

  • Like 3
Link to comment
Share on other sites

  • 3 months later...
  • 2 weeks later...
  • 4 weeks later...
  • 1 year later...

AdsMaker is a innovative campaign, feedback and approval tool with integrated HTML5 ClickTag Checker. AdsMaker enables the user to administer and manage all sorts of campaigns, whether it’s an HTML5 Banner, a cross-media TV & radio spot or Social Media Ads, have them approved or commented by the customer, and then efficiently forwarded to the desired Media Agency or AdServer ?.

  1. -          Drag & drop uploader with integrated HTML5-Banner "ClickTag-Checker".

  2. -          Campaign Archives; sorted by month / year.

  3. -          Mobile MockUps for Responsive view & Social Media Ads.
  4.         Smart One-Click Preview for your Ads

More informations: www.ads-maker.de
Link to comment
Share on other sites

  • 2 years later...

Hi guys, Is anyone still in this thread?

I have developed a preview tool for my own company. Feel free to sign up and use it and please leave feedback! It's in a MVP state (minimum viable product) so good feedback features might be developed. Any suggestions of fair pricing? :)

Request an account here:


Kristian / Bannerreview


  • Like 1
Link to comment
Share on other sites

  • 1 year later...

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...