Search the Community

Showing results for tags 'banner'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 / JS
    • GSAP
    • Banner Animation
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)


  • HTML5 / JS
    • Public
    • "Simply Green" Package
    • "Shockingly Green" Package
    • "Business Green" Package
  • Flash
    • AS3
    • AS2

Found 38 results

  1. Hi there, I've been struggling with this for a while now and finally decided to submit this to the forum. I've read a number of posts that make this seem easy, but I'm obviously missing something. I'm trying to simply add an HTML video element to a timeline so I can control when it starts to play and coordinate it with my other banner elements. In this simple example, I want to control how long I see a black screen with the intro text before I fade that black background and text away and start the video. (The Pen I've posted here is a much shortened version, btw, for simplicity.) I have tried a number of configurations of .play() and .add with a callback function, but it just doesn't seem to work. The only reason the video plays in the Pen I have now is that I have autoplay set in the HTML attributes in the video element. If I remove that attribute from the video element, the rest of my timeline plays over a blank box. Is there something I'm missing with how to configure a video element and add it to a simple timeline? Thanks so much for any insight you can give me!
  2. Hi Guys, my Name is Oliver. I am the developer of anivendo. A fast, modern and easy to use HTML5 Banner-Animation-App for Windows (Mac-Version will follow) which uses TWEENMAX. · No Coding Experience required! · NO COMPLICATED TIMELINE! anivendo animates your Banner Creatives very much faster than traditional HTML5 Animation Tools like Google Webdesigner, Adobe Flash, Adobe Animate CC, Adobe Edge Animate, etc… Why don’t you take a Look. We are currently searching for alpha-Tester! Update (03-23-2018): anivendo is now fully documented! Questions, Bug Report and Improvement Suggestions can be made via anivendo Community Forum _ Cheers Oliver
  3. Loop with DevTools

    Hey guys, I'm creating a banner, which will play 3 times (loop 2), and use GSDevlTools. The bannerflow is like this: Intro, Scene 1, Scene 2, Scene 3, Outro Scene 1, Scene 2, Scene 3, Outro Scene 1, Scene 2, Scene 3 So after the first loop Intro should be removed, and the last loop should not play the Outro. My issue here is, that i cannot figure out a way to write the code, so it also works with GSDevTools. - the final timeline is not showing the correct length. I've tried with var master_timeline = new TimelineMax(); master_timeline .add(intro()) .add(scene1()) .add(scene2()) .add(scene3()) .add(outro()) .add(scene1()) .add(scene2()) .add(scene3()) .add(outro()) .add(scene1()) .add(scene2()) .add(scene3()) ; But that makes it very messy writing the scenes.. - i cannot use .from at all because, the it conflict with the scenes later on. Then i've tried with var master_timeline = new TimelineMax({repeat:2, onRepeat:check_replay}); master_timeline .add(intro(), "intro") .add(scene1(), "+=0.5") .add(scene2(), "+=0.5") .add(scene3(), "+=0.5") .add(outro(), "outro+=0.5") ; function repeat(){ master_timeline.remove("intro"); } Which does not remove the intro. Then i've tried var master_timeline = new TimelineMax({onComplete:repeat}); var loops = 0; var max_loops = 3; master_timeline .add(intro(), "intro") .add(scene1(), "+=0.5") .add(scene2(), "+=0.5") .add(scene3(), "+=0.5") .add(outro(), "outro+=0.5") ; function repeat(){ loops++; if(loops == 1){ master_timeline.remove("intro"); } else if(loops >= max_loops){ master_timeline.remove("outro"); } master_timeline.restart(); } Which it does not remove any of the labeled scenes, and the GSDevTools timeline, does not show the correct maxtime. I'm really out of solutions, so i would be very happy if any of you guys have a solution, or just a hint which can lead me in the correct way. Best regards Christian
  4. Banner backup images

    Hi all, This isn't really Greensock-related but I was wondering how you guys create backup images for banners, you know those 40k backup images that are needed when JS is disabled on the browser for example. I mostly use Animate CC (in combo with TweenMax of course) and how I do it now is right clicking on the banner (the canvas object) in Chrome once the banner reached its end and then saving it as a PNG, and then also mostly compressing it afterwards in Photoshop as a JPG to get it under 40k. Are there better practices or tools that can automate this? This is really time consuming. Thanks! Nicolas
  5. Hi guys! Is it possible to find an example of a responsive banner that I can make in Adobe Animate 2017? All my old source files that worked a year ago do not work now and my skills are not enough to understand what has changed, I just see that the code that generates Animate just diferent. The banner should stretch the entire length of the page, have a minimum width (for example 800 px), and inside there should be 3 independent moveclips - "left", "central" and "right", which change their position depending on the width of the banner. Thanks for any help!
  6. Hi Guys, How's it going? I can't seem to figure out how to target inside movieclip on my banner. Basically i want to play the background once my timelime reaches the button - also how I'm i suppose to make the slideshow in code-based? please find attached. Thank alot, Chris R
  7. Sizmek Biolerplate??

    HI everyone, really happy to get a job animating HTML5 banners using GSAP. Making and animating the banners are not the problem, i am having a problem getting them loaded into sizmek. I followed some documentation and registered click events but the agency i have to send them to says they won't work. Does any one have a blank biolerplate i can load my project into with sizmek built into it. The static banner template from sizmek set they gave me keeps throwing errors it's just a simple one size banner that needs a to be fully clickable. Any help would be appreciated.
  8. I've been using this for a while, it's not perfect but the idea behind it I guess is to generate multiple banners with minimal effort plus a presentable preview link, with backup images. If anyone can review or comment on what can be done for improvementr, it'd be great! cheers
  9. Layout Helper

    Please check my tutorial on my Layout Helper tool to create banners faster:
  10. I'm new to banner development and I'm pretty much on my own. Living and learning... I've built quite a lot of DCMs without any issues. My DCM template is pretty solid already but this template I created doesn't work well with other formats and ad platforms. I ran into a lot of issues while doing DCRM and sizmek ads. I've tried BannerTime and I liked it for the most part like being able to choose which platform specific template to use and all but it's using smart objects and stuff which the dumb me doesn't really see the point of using all that while every KB counts. I also noticed that it served the ad right in the middle of the page horizontally and vertically. I also do not see the point of that. Aren't ads supposed to be at the top left corner by default? But I digress. I'm scared if I changed something, it would break something else. I plan to create my own builder in the future once I gain more understanding on the requirements of each ad platform. For now I just want a very minimal builder that can create boilerplates for different ad platforms with gsap so that I don't run into any more issues. That's it. Please help if you know any. Thank you. Oh and does anyone run into issues by using outdated templates? I don't know why ad platforms do not make it easy to get the latest stable templates. So, it would be great if it's a builder that is being updated quite regularly.
  11. I tried to add a border to a banner Ive made, but none of the tries worked i tried .to(type1, .3,{backgroundColor: "#000000", border:"40px #00a1d6 solid"}) I tried with an inset and i get the same effect but I dont want it to be transparent. .to(type1, .3,{backgroundColor: "#000000", box:"inset 0 0 0 7px #00a1d6 solid"}) I like how it looks with the inset but I the only thing about it is the shadow effect and how things can be seen under the inset once the logo passes by. Here is my codepen
  12. GIF banners

    I recently struggle to deliver a couple of banners for XAd. They needed to be a 320x50 and a 300x250 with weights of 20k and 40k respectively. After some research I ended up doing it in Photoshop. However "Video Timeline" only allowed for linear interpolation. My question is: When requested for GIF banners what is your approach? tools? workflow? dealing with the art director?
  13. Hi all! I'm new to GSAP - are studying it. I found this example of the banner - However, this banner needs to be redone. Said that it was necessary - "Need to size it down for adwords, and also make a few variations". But please tell me, I don't know what I need to change in this banner? I need to make changes - just tell me, please, what should I do and what changes to make?
  14. Hello! I've been making svg animated banner ads, and the client ran into a bit of a snag- there are some artifacts being left behind by the animation on certain computers. It seems to only be in Chrome, but isn't consistent across computers. The client is running the same OS and version of Chrome as I am (Windows 10 / Chrome 55.0.2883.87 m), yet I have no issues. Here is a screenshot of what's showing up underneath the Call-To-Action button (scales in from 0, there is no shadow under the button) and some text (moves up from below the viewbox): This is the transformations I'm applying: t1.fromTo(text2, 0.75, {y:75}, {y:0}); t1.fromTo(cta, 0.4, {autoAlpha: 0, scale: 0, transformOrigin: '50% 50%'}, {autoAlpha: 1, scale: 1, ease: Back.easeOut}); Has anyone else encountered this?
  15. Hello GSAP community! Been learning GSAP as of late and really loving it however i am stuck in developing this particular banner. I have set up all my html, css and JS created my ids and variables and developed a single timeline for animation. However it seems for some reason the timeline only plays the first 2 tweens and then stops even though i have more animation to follow. have a look at my codepen to see what i am trying to achieve here: What i would like is to at first set mainScene, NYScene, NJScene, PAScene all to beoffscreen to the left by 322px. then the animation should kick in and slide in each scene and slide it back out then slide in the next scene and so on. But for some reason my first two timeline events happen with mainScene but then it stops? Please advise. I am also open to any alternative methods of bringing in pages/scenes into and out of view that may be better then my solution. thanks everyone!
  16. Hi, I have just started working the Tweens here, so please if you can help me on probably a simple thing for some. I would like to: 1. Add a YouTube video that autoplays after an animation (not when the banner starts, so the video starts autoplays after the animation). 2. When clicking anywhere on the banner to be taken to the external link, the video stops. 3. The video stops after playing for example, 10 seconds. Can this be done? I have been trying and looking into it and unable to combine my animation and Youtube video together.
  17. 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!
  18. AdHelper js_defer error?

    I've been creating some banners in Animate CC using GSAP and AdHelper as presented here. Using the GSAP_AdStarter.fla template. I managed to get the banner running on my local machine just fine when I test it, but as soon as I upload it to the testing server to view it, the banner will not load and I keep getting an error thrown: PSA ERROR: Exception while evaluating.preloader is undefined It's being called from js_defer.js. The banner does not load (only displays the default "Loading Advertisement...") and I cannot figure out why this happens. Has anyone else come across this error? And if so, is there a solution?
  19. I am using TimelineLite to animate a banner but I'm not able to do the banner stay in looping. The animation is working just fine but the restart line doesn't work. Someone help me please? 300x250
  20. Hi. With using sprite sheets I wanted to just set the width, height and background-position properties in CSS and set the rest in javascript with TimelineLite or TimelineMax. Is there a best practice for this? I want to do something like in the following example: I set all the images to hidden to start then animate with fromTo as needed. I made an example here with 3 different colored boxes, which works great on all browsers. The issue I am having is that on a DoubleClick banner example using the same technique I am having problems when I restart the timeline just in IE10. When I call tl.restart, any of the fromTo images with immediateRender:false are visible from the beginning instead of having autoAlpha:0. Thanks in advance, Kurt
  21. Hi there, long-time lurker, first-time poster. I have an obnoxiously complex set of dynamic banners (content pulled in through a feed) where there are dozens of different static elements that can be called depending on one of the variables passed into the feed. I'm using TimelineMax to animate them. There are 2 timelines running simultaneously: one with foreground content, and a background animation. The elements being tweened on each timeline are mutually exclusive and the timing doesn't relate. They should both start on load and play independently. The whole thing is MUCH more complex than this but I've simplified it down to the gist of the structure. Everything works perfectly ~8 times out of 10 while hosted on Doubleclick (Chrome, Firefox, Safari tested on Mac all similar results), and every time locally. It's just every once in a while the elements on the "animationTL" will suddenly revert back to opacity:0 after they've tweened in. The whole "mainTLready" and "animationTLready" thing is also a workaround for a different issue I was encountering. If I just let each timeline play immediately, sometimes, when hooked up to the dynamic feed, it would hang up and nothing would animate at all. So this seems to correct that problem, but I couldn't replicate the issue on my end so I'm not 100% sure. function init(){ graphicsAnimation(); //build mainTL: uses .to, .from, .staggerFrom, .add mainTLready=true; playBanner(); } function graphicsAnimation(){ //build animationTL (inside switch statement cases): .set, .from only. //Most of these animate x/y and opacity. ".set"s are declaring scale, top & left values. animationTLready=true; playBanner(); } function playBanner(){ if(mainTLready&&animationTLready){ document.getElementById('content').style.visibility = "visible";;; } } TL;DR "from" tweened elements revert after tweening back to their pre-tween state. Works locally, breaks ~20% of the time loaded on Doubleclick with text and images pulled from dynamic feed. So um, any ideas? Let me know if you need more info. Thank you!
  22. "Malformed assets"

    This isn't a GSAP question, but I was wondering if you guys had gotten this from a media agency before. Four of the six ads we sent over got kicked back from their QA (I'm assuming they're using DCM, since they're standard banners), and they reason they gave was: "One of your HTML5 assets is invalid and cannot be analyzed. Please correct any malformed assets and try again." Have you guys seen this before? These ads are all based on the same code, so I don't understand why some of them passed and some failed QA. I've tried a bunch of stuff, like un-minifying the javascript, deleting comments that reference unused assets, but I really feel like I'm shooting in the dark here. I would have thought it was an issue with nested assets, or too many assets, but that doesn't seem to be the case. We reached out to the ad ops guys for more clarification, but the media companies seem to have the sense of urgency of a slug, and I really want to get this resolved as quickly as possible. Help!
  23. Hi, new to this framework but it seems really really neat, makes me excited to get in to web animation. Great work Greensock team! I have a question that I suspect is fairly simple, I would like to trigger different tweenlite animations using a draggable button, so that depending on where the draggable object stops, or snaps, it will trigger a new tweenlite object. Hopefully someone can understand my question I will put it into a codepen but this is my js atm. Draggable.create("#button", { type:"x", bounds: document.getElementById("line"), throwProps: true, liveSnap: true, snap:[5, 75, 150, 225, 285], trigger: document.getElementById("button"), onDrag: function() { console.log(this.x) }, onDragEnd:function() {, 2, {sideElement1, width:"200px", height:"150px"}); } }); any help would be greatly appreciated. would love to be able to contribute to this forum, since this seems to be part of my new work description....
  24. Loop a staggerTo [basic banner]

    tl.staggerTo ([f1, f2, f3, f4, f5], 0.15, {opacity: 1}, 5 ) function loop() { tl.restart(); } I am another designer moving from Flash to code-controlled animations. New to JS, but can white CSS freely. Need some assistance. Simple banner: 5 images following each other. Im using TimelineLite and staggerTo. How do I loop the sequence? -- Thank, you. schtals
  25. Hello everyone, I have just started with HMTL 5 banner ads. My current task is to recreate some of our Flash banners with HTML. I am trying to find out how to create transition effects in HTML5 banners. Can GSAP (or a plugin) handle following effects? Btw: Is a standard (free) license to create banners for a company? Can someone please help me?