Search the Community
Showing results for tags 'banner'.
Found 49 results
-
Hi all! I'm new to GSAP - are studying it. I found this example of the banner - http://gsap-banner.getforge.io/. 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?
-
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?
-
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: https://codepen.io/Caderial/pen/LbYRVZ 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! -
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.
-
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?
-
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 2.zip
-
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. http://codepen.io/anon/pen/jbKWJg 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
-
Dynamic Doubleclick: objects revert after "from" tween?
amplitrix posted a topic in Banner Animation
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"; mainTL.play(); animationTL.play(); } } 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! -
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() { TweenLite.to(sideElement1, 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....
-
deleted
-
Hey guys, I'm creating some banners for a client but running into issues with compatibility. The banner functions as planned in FF and Chrome, however in IE the Canon logo just site in the middle of the frame, with no animation. I've looked online and found some people complaining about IE issues with CSS animations, however it's usually transforms they can't get to work. All I'm using is fades, minus one button adjusting the y axis. Can someone please tell me what I'm doing wrong? I'm not that well versed in GSAP. CodePen: http://codepen.io/anon/pen/OypmrM Thanks in advance!! -
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? https://www.youtube.com/watch?v=AnsGSwMlxy4 Btw: Is a standard (free) license to create banners for a company? Can someone please help me?
-
Hi, Been trying to get this to work for a little while now, a bit stuck. CodePen: http://codepen.io/Dev-KP/pen/jbMWxy Basically the individual animations work: .add(aninIn(copy1, 20)) //.add(aninOut(copy1, 20)) When one of them is commented out the other will work perfectly, but having them both there seems to make them merge. I'm guessing it's something to do with the .set in the returned tiimelines? If I am not mistaken the nested timelines should play one after another? Or is this something for immediateRender? Cheers P
-
Hi, i am doing tons of online advertising banner stuff. Sometimes I have to use local JS GSAP libraries, but often i can use the CDN path to Tweenlite etc. to save file size when delivering to the advertiser. There are two methods - to link to the latest GSAP eg <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineLite.min.js"></script> or link to the version # of GSAP when coding the banner <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenLite.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TimelineLite.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/easing/EasePack.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/CSSPlugin.min.js"></script> What is more save to ensure the banners will work, when they show up later "live" at the browsers. Today i had some trouble when using the CDN Links with version # and got a error in Google Chrome's Browser ERR_SPDY_PROTOCOL_ERROR where the JS scripts did not load at all - so did not the banners! This should never happen when the work is "live"...
-
Hi, I just finished reading your "Solutions for Banner Ads in a post-Flash world" article and in it you state that Doubleclick hosts GSAP on a CDN. Where could i find the SRC for that? I have the Cloudflare SRC, is it the same, or a different one? Thanks to anyone that can answer!
-
I'm a seasoned flash developer who's done a lot of flash banner. Have been asked to look into doing an HTML5 banner, and since I know a fair amount of Javascript, some jQuery, GSAP, etc, I think I can do it. This is a concept banner, the ad agency doesn't really know what they're doing, so I don't know if what they want is possible. I also must admit, I don't see the forest for the trees as far as creating HTML5 banners, never having done it, so any help on how to best-practice it would be helpful. Specs are: "One 300x250 unit, does not expand, HTML5, 40k initial load (we can do 50k if it helps), 61k subsequent load (polite), 30 max animation, 24 fps, 3 loops max." * the animation they want originally was a flash animation, a little cartoon with many moving images, text — a typical flash banner ad — including little action figures hitting each other (it's an advertisement for an online game). Obviously the animation would be fairly crude, I told them that, but what does one do? Just set up divs and tween around? Would one want to use canvas at all? Can GSAP work with canvas? * what does file size mean in the HTML5 world? All the HTML, JS, CSS files plus images? I assume GSAP will do fine, but jQuery too? Coming from Flash, I really don't want to worry about browser issues (I know nothing about them), so jQuery keeps it nicely abstract. * they asked if HTML5 allowed video and suggested layering that in to show the figures fighting. This seems needless complex and size-intensive, no? In any case, I've done a zillion flash banners with GSAP, but am not too clued in how to make an HTML5 banner work the best way. There are a lot of tutorials out there, and I've looked at some, but they all seem very different in their approach; and the client wants this done very quickly, so I'm keen to leverage my Flash knowledge and make the transition to HTML5. Any help much appreciated. -
I'm trying to come up with some aprox. file size numbers for a client on an estimation for a banner ad. So if I use GreenSock it would be: TweenLite.min.js = 26 KB EasePack.min.js = 5 KB CSSPlugin.min.js = 35 KB That's the bare minimum I would need right?
-
I've used BlitMask api for numerous banners to show slot like rotations. Its works like a charm. But as soon as I try to upload these banner on Google ads, it rejects the swf throwing the error "flash performs disallowed operation - Mouse Tracking" Please advise. -
I was asked on Facebook about using GSAP in banner ads that are created for/in the MRAID system, and since Facebook is really bad for tech support and posting code, I figured I'd start a topic here so others could benefit too... You can create and test an ad in a browser-based simulator here: http://webtester.mraid.org/. I noticed that there was a problem with the simulator or MRAID itself that was causing it to trigger the ad BEFORE 3rd party libraries had finished loading. So in this case, TweenLite wasn't defined yet, thus no animations would work. The simple workaround is to add some conditional logic so that your animation code doesn't run until both MRAID is ready and TweenLite/CSSPlugin has loaded. Here's a simple example that seems to work fine in the simulator: <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.7/TweenLite.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.7/plugins/CSSPlugin.min.js"></script> <div id="box" style="background-color:green; width:100px; height: 50px; position:absolute;"></div> <script> //this method gets called when the ad is ready and should run. function runMyAd() { TweenLite.to("#box", 2, {y:100, opacity:0.5}); } //this function keeps checking to see if mraid is ready and TweenMax has finished loading. function doReadyCheck() { if (mraid.isViewable() && window.TweenLite) { runMyAd(); } else { setTimeout(doReadyCheck, 100); } } doReadyCheck(); </script> Useful link: Common problems and best practices: http://www.iab.net/media/file/MRAID_Best_Practices_Final.pdf
-
Hi all, runbanner.com is a new browser based, visual tool for creating banners and html5 animations without any coding. Right now it is in public beta and you can have unlimited access to all the features with simple one-click sign up process. See demo html5 banners or the introduction video and let us know what you think.
- 1 reply
-
- 4
-
-
- banner
- authoring tool
- (and 1 more)
-
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!
-
Hello everyone! I wanted to ask you something. My task is to reproduce flash banner with javascript and html. I attached example in .mov format to sendspace so you can download see it. First part of animation is not a problem to me but raising stars are. I don't know how to begin that animation. Can someone help me about this? Thank you! video file http://www.sendspace.com/file/4790e8 working files http://www.sendspace.com/file/pil2ph
-
Hi, I'm using TweenLite with a banner I'm making. It's for an adserving platform called flashtalking It gives me this warning when I upload Obviously, I don't want to TimeLine animate it. Is there a way of tricking it to make it stream? Thanks.
-
Dear Tutors, This is Sanjib i have a flash web banner which has two kind of navigation in it one is "next and previous button" and second one is "Tween Animated Tab navigation at the bottom" you can download the the folder of the banner by clicking on this link "http://www.touchpixl...er1/banner1.rar" . I want to change the dimension "width or height" of the banner, can anyone make the same logic in a banner in flash file format and upload some where or send it to me at "sanjibpersonaldata@gmail.com", you can see the banner here "http://www.touchpixl.com/banner1" I would like to mention that i have lost the flash file of the "holder" file nad without that i am not being able to increase or decrease the dimension of this banner/slide. Thanks in advance Sanjib Das
