Search the Community

I have been trying to work using the skewX and skewY properties. For some reason skewY has been acting very strange, although skewX seems to work fine. Here : http://codepen.io/praneybehl/pen/lkhFn Is this a bug? Thanks, Praney

Has anyone created a Durandal transition using Greensock? They have some basic instructions (http://durandaljs.com/documentation/Creating-A-Transition.html) and a very complicated sample (https://github.com/BlueSpire/Durandal/blob/master/src/transitions/js/entrance.js) but I don't know how to translate this to the GSAP world. For one thing, the transition module must return a promise. I have a pretty good idea of what a promise is but am, again, unsure of the GSAP code to make this happen. If anyone has any example code that would be most helpful — or some pointers. Thanks!

Hi i'm trying to create stagger effects on my app dashboard, but the problem is i follow all the documentation guide lines, but there is no way to create Stagger that trigger different directions. only the given parameters and all object stag to the same pattern, but i need to stagger it from different directions. eg : Use case scenario that i'm trying to archive. 1). Top bar comes in document top position 2). Sidebar comes in right side 3). Body element comes in bottom and so on.. i know i can use Timeline Max for this situation, but i need to create this from stagger Effect for re-usable purpose. and trigger from click event

Hello, how much does the different GSAP components really weigh? When you download from the greensock CDN, it says: But when I look in the chrome network inspector, I see: TimelineLite weighs about 11 kb and TweenLite weighs 25kb compared to 6kb like it says on the greensock website. What's up with that? I suppose that I should trust the network inspector, but I really want to believe that it only weighs 6kb (which seems way too good to be true). Thanks! /Alex

I am trying to rotate an element(button) counter-clockwise 90deg using TweenLite. It is working fine in chrome and firefox but misbehaving in IE9. Expected behavior is that it only rotate but in IE9 along with rotation it is changing is position also. This behavior is consistent in IE9 and is produced only in special case, with simple rotation test in IE9 the behavior is as expected. Here is a video for reference (notice the button labeled button 17): http://screencast.com/t/waaEX1NxWcTd The HTML of button looks something like: <div data-id="animWrapper_spin9ivgo7os" style="height: 11.2%; width: 8.65979381443299%; position: absolute; top: 17.6%; left: 67.5257731958763%; z-index: 8; -webkit-perspective: 400; -webkit-backface-visibility: visible; -webkit-transform-style: preserve-3d; display: block;"> <button checked="checked" tagname="BUTTON" src="" srcsize="0" srcduration="" srcformat="" domstyle="[object Object]" name="button 17" class="button adelem" data-id="9ivg" adtype="button" style="width: 100%; height: 100%; left: 0px; top: 0px; z-index: 8; -webkit-perspective: 400; -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d;">button 17</button> </div> The rotation is applied to the div wrapping the button [data-id=animWrapper_spin9ivgo7os], which is inside another iframe. I am unable to reproduce the error in simple page. Please help me if someone know what could have been the reason.

Hi there. I am trying to setup doubleclick with GSAP. However, when I add the enablers and etc, it causes my ad to freeze. I created a codepen. Please let me know if you see something obvious that I'm doing wrong. Thank you!

Hi there. I'm working on developing a demo to present to my company tomorrow on the wonders of GSAP. However, for some reason, on my company network, my ads aren't displaying. Here is an old ad that i made that I made as a demo that I know worked before, yet is showing as blank. http://simplisticallycomplicated.biz/portfolio/2013/01/09/dsg-ad-created-with-html5-animation/ Here is my new code that I'm working on, super simple, yet the tweenlite calls aren't being made. You can see I'm linking to the JS files, locally, even. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style> #adcontainer { width:300px; height:250px; overflow:hidden; border:1px solid #A7A7A2; background-image:url(../images/background.jpg); } #gearup { font-family: Anderson 1938, Verdana, Geneva, sans-serif; font-size:56px; text-align:center; color:#fff; opacity:0; } </style> <title>Snowsports HTML5</title> </head> <body> <div id="adcontainer"> <div id="gearup">GEAR UP</div> </div> <!--- The following scripts are necessary to do TweenLite tweens on CSS properties --> <script src="/js/CSSPlugin.min.js"></script> <script src="/js/EasePack.min.js"></script> <script src="/js/TweenLite.min.js"></script> <script> window.onload = function(){ TweenLite.to("gearup", 1, {alpha:1}); } </script> </body> </html>

I'm using Greensock animations for a web app I'm developing. On iOS, desktops the scroll animation plays really smooth, there's no problem. On Android browser things get complicated. On some devices it plays good(Nexus 5, Galaxy S4) on others it's choking(Nexus 7) I've tried setting the z property(TweenLite.set(element, {z:0.1}) , using x, y instead of top, left but nothing changed. I'm wondering if there's anything I can do to speed up GSAP on android browser. Any help is appreciated. https://dl.dropboxusercontent.com/u/4605534/examples/ztyga_gsap_test/index.html

I'm working on a site which will use like 7 slides in a kind of stair way. I was now trying to use Draggable for my navigation but I want to prevent the user to get lost. Since you can use type:x or type:y I thought I might get somewhere if I could change that type on the fly after Draggable.create. That doesn't seem to work. Maybe someone knows if that's possible or if I better can look for a solution based on a combination of tweens and scrollTo? To be clear an image attached of the layout. Every screen will cover the entire window.

Hey all! I've been doing a lot of animating along bezier curves and created a simple little helper tool/function that converts an SVG path into an array of cubic bezier points that can be plugged directly into GSAP Tweening functions. It's still missing a little functionality for quadratic and elliptical arc movements, but I haven't come across any issues with it yet converting SVGs saved out of Illustrator. Just thought I'd share in case anyone else finds it useful. http://github.com/mattanglin/svg-to-cubic-bezier I'll update to incorporate the other SVG movements (and cleanup the code. It's pretty quick and dirty at the moment...) as I have time. Any feedback welcomed. Thanks!

Please help. Despite many efforts this is not rotating the ellipses.. ive followed the same syntax which has worked before with other attributes being animated, and checked other codepens which seem to work! GSAP seems very sensitive to syntax, and the docs on line are not helpful... thanks

I have an object that is within scope of two tweens. I want to relatively tween a numeric property of this object in both tweens, however the tweens both seem to be making their own internal copy of the object during the tween and overwriting the object. Thus the resulting value of the object is equal to the value of the tween that finishes last and thus gets to overwrite the property the last. See my codepen for an example. How would I make these tweens compete against each other?

I am having some issues related to tweening HTML elements in 3d — specifically <li>'s in this case. I'm working on a site which is generated by PHP and have a menu generated for me of this type (the real menu is longer) <ul id="menu-main" class="menus menu-secondary sub-menu sf-js-enabled"><li id="menu-item-42" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-42" style="visibility: visible; opacity: 1; transform: translate3d(0px, 0px, 0px);"><a href="http://whatever.com/category/about/">About</a></li> <li id="menu-item-1350241" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1350241" style="visibility: visible; opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);"><a href="http://whatever.com/search/">Search</a></li> <li id="menu-item-47" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-47" style="visibility: visible; opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);"><a href="http://whatever.com/category/popular/">Popular</a></li> </ul> Wanted to fool around with some simple GSAP animation, and all works fine but I cannot get the li's to tween rotationX or rotationY within the jQuery hover callbacks. rotationZ works. If someone could point out the obvious point I'm missing I'd be grateful. initMenus(); function checkMenuItem(theTween) { if ($(theTween.target).hasClass('current-menu-item')) { tl = new TimelineMax(); tl.to(theTween.target,.25,{ease:Quad.easeInOut,scale:1.5}); tl.to(theTween.target,1,{ease:Bounce.easeOut,scale:1}); } } function menuover() { var tl = new TimelineMax(); tl.to(this,.25,{rotationX:'+=30deg',ease:Quad.easeIn,scale:1.5}); tl.to(this,.35,{rotationX:'-=30deg',ease:Quad.easeOut,scale:1.25}); } function menuout() { TweenMax.to(this,1,{ease:Bounce.easeOut,scale:1}) } function initMenus() { var tl = new TimelineMax({}); $('#menu-main li').css('visibility','visible'); $('#menu-main li ').hover(menuover,menuout); tl.staggerFrom('#menu-main li ',1.4,{onStart:checkMenuItem,onStartParams:["{self}"],alpha:0,x:"-=100",ease:Elastic.easeOut},.15,.1); }

So I have this idea to do an landing animation for my new website with svg animation. Where I'll have multiple parallax cloud layers animating. However, I am having issues getting the idea to work in all browsers, and can't even get it to work at all in CodePen for some reason. There has to be an easier way to do this kind of animation. I'm just looking to get pointed in the right direction here as I am getting frustrated trying to get this to work. The animation works in Chrome, but Firefox reports the initial position of the clouds and never updates for some reason no matter what I've tried with jQuery anyways. http://timherbert.net/sandbox/ I also accidently linked the private codepen. Here is the public one: http://codepen.io/timherbert/pen/vzuDr/

Hi again. I've started a beginner tutorial series for people looking to get started with HTML5 game development using jQuery and GSAP. Thought I'd link here for those who might be interested. I hope this is relevant, if not, feel free to moderate. The series will cover prototyping with JSBIN (substitute codepen, jsfiddle), animation (GSAP of course), basic collision detection and added particle effects with canvas. Part 1 covering prototyping and animation is fresh of the press and working on the collision detection next. Thanks, Andrew

Hi, I try to scroll from an anchor to a div, it's work to go to the top of window but from top of window to a bottom section it doesn't work. http://codepen.io/dhenriet/pen/dtJog function TweenScroll(anchor) { $(anchor).click(function(e) { e.preventDefault(); var domId = $(anchor).attr('href'); //.attr('href').slice(1); var domScroll = $(domId).offset().top; console.log(domScroll); TweenMax.to(window, 1.5, { scrollTo: { y: domScroll }, ease: Back.easeInOut }); }); } TweenScroll('#top'); TweenScroll('#start');

I've started with javascript and GSAP in my project. I've used Tweenlite.to() to change the opacity of some anchor tags. The animations are working absolutely great the first time I'm opening the page. But if I reload the page, the tweens are not working. I'm closing the tab and opening the page in a new tab and its working again. Why is it so? <--HTML file--> <html> <head> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/TweenLite.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/plugins/CSSPlugin.min.js"></script> <script src="animations.js"></script> </head> <body> ... ... <nav> <a href="#" id="a_home" onMouseOver="inHome()" onMouseOut="outHome()"> Home </a> ... </nav> ... ... </body> </html> <--animations.js--> function inHome(){ TweenLite.to("#a_home",0.3,{css:{opacity: 1}}); } function outHome(){ TweenLite.to("#a_home",1.5,{css:{opacity:0.7}}); }

Hey there everyone in the community, I am new here and firstly I gotta say to the GSAP Dev's...GREAT JOB, amazing plugin. But, even with its ease of use, I found it hard to aquire my desired effect. What I iam to accomplish, is to initiate a text animation I have used from your examples in the ZIP file, upon scrolling over the desired DIV. As it sits, GSAP uses: $(window).load(function() { to initiate the animations declared in the JS. Since I do not ant the animation to instantly start on page load, and I want it to start once scrolled over, this does not work for me. Now, I have tried the simple and powerful: $(window).on('scroll', function() { to try to reach my results. Hoever, even though it works upon scrolling over. It also works upon page load. Meaning, that lets say Im at the point of origin where the animations take place on the page. I refresh my page in that spot and the GSAP takes place right away. I move out of that space to another point on the page and scroll back to the animation area, and the letters in the animation are there as if the animation has finished (which it has because it still initiated on page load somehow) BUT then... the animation occurs upon scrolling over, but, get this...the animations from the scroll, take place underneath the completed animation that occured on page load. It is very hard to explain but you can evaulate my code below, and maybe help me to get the animation to only take effect when it is scrolled over. Here is my code: $(window).load(function() { var logo = $("#logo"), progressValue = $("#progressValue"), totalProgressValue = $("#totalProgressValue"), timeValue = $("#timeValue"), totalTimeValue = $("#totalTimeValue"), restartBtn = $("#restartBtn"), txtContainer = $("#txtContainer"), tl, progressSlider, totalProgressSlider, txt; /* Build DOM Elements*/ function splitText(phrase) { var prevLetter, sentence, sentence = phrase.split(""); $.each(sentence, function(index, val) { if(val === " "){ val = " "; } var letter = $("<div/>", { id : "txt" + index }).addClass('txt').html(val).appendTo(txtContainer); if(prevLetter) { $(letter).css("left", ($(prevLetter).position().left + $(letter).width()) + "px"); }; prevLetter = letter; }); txt = $(".txt"); } /* Build Timeline */ function buildTimeline() { //note this timeline uses 3D transforms which will only work in recent versions of Safari, Chrome, and FireFox. IE10 will support 3D transforms as well. All other browsers simply will not show those properties being tweened. TweenLite.set(txtContainer, {css:{perspective:500}}); tl = new TimelineMax({onUpdate:updateUI, repeat:2, repeatDelay:1, yoyo:true}); tl.from(logo, 0.5, {left:'-=60px', ease:Back.easeOut}); tl.staggerTo(txt, 0.6, {rotationX:"360deg", color:"858585", transformOrigin:"50% 50% 10"}, 0.02); } /* callbacks */ function updateUI() { //change slider value progressSlider.slider("value", tl.progress() *100); totalProgressSlider.slider("value", tl.totalProgress() *100); //update display of values progressValue.html(tl.progress().toFixed(2)); totalProgressValue.html(tl.totalProgress().toFixed(2)); timeValue.html(tl.time().toFixed(2)); totalTimeValue.html(tl.totalTime().toFixed(2)); } function init() { splitText("CONTACT US"); buildTimeline(); //show the demoBackground div after DOM is ready and all images loaded TweenLite.set($("#demoBackground"), {visibility:"visible"}); } init(); }); If anyone sees what I am doing wrong here, or can help...please do. I am not very new to JS or jQuery but am very new to GSAP. So any help is appreciated. Thanks in advance! EDIT: Here is my HTML: <div id="demo"> <h1 id="txtContainer"></h1> </div> </div> Thanks again! ~Jason of AJADMIN Websites

So, I'm trying to build a slideshow that uses GSAP. But I'm wondering... do I do EVERYTHING with GSAP? One thing I'm trying to use right now is jQuery's addClass. The class I'm adding basically makes something visible. Can I continue to use that to show my slide? Or do I need to use GSAP to get the performance boost?

So I found a tutorial here: http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641 That makes parallax scrolling very simple and easy to understand. I want to take the javascript from the tutorial and apply GSAP. Not sure how to do that however.. The JavaScript from the tutorial. I'm sure it's easy but it would probably take me hours of playing with it where someone here has probably done it already or could do it in a minute or two. var $window = $(window); $('section[data-type=background]').each(function(){ var $bgobj = $(this); // assigning the object $(window).scroll(function() { var yPos = -($window.scrollTop() / $bgobj.data('speed')); // Put together our final background position var coords = '50% '+ yPos + 'px'; // Move the background $bgobj.css({ backgroundPosition: coords }); }); });

i have to be doing something wrong lol....first off i have a parallax scrolling intro to my site ....using GSAP. i have abt 20 items in total with about 70 individual animations lol..... this is what a small section of my code looks like var svg3 = TweenMax.to(".svg-1, .svg-2, .svg-3, .svg-4",1, { rotation: 180 }); var sceneSvg3 = new ScrollScene({ duration: 1000, offset: 2000}) .setTween(svg3) .addTo(controller); var svg4 = TweenMax.to(".svg-1, .svg-2, .svg-3, .svg-4",1, { rotationY: 180 }); var sceneSvg4 = new ScrollScene({ duration: 1000, offset: 7200}) .setTween(svg4) .addTo(controller); var svg5 = TweenMax.to(".svg-1, .svg-2, .svg-3, .svg-4",1, { rotationX: 180 }); var sceneSvg5 = new ScrollScene({ duration: 1000, offset: 9000}) .setTween(svg5) .addTo(controller); var svg6 = TweenMax.to(".svg-1, .svg-2, .svg-3, .svg-4",1, { rotation: 45}); var sceneSvg6 = new ScrollScene({ duration: 1000, offset: 11000}) .setTween(svg6) .addTo(controller); var svg7 = TweenMax.to(".svg-1, .svg-2, .svg-3, .svg-4 " ,1, { rotation: 90}); var sceneSvg7 = new ScrollScene({ duration: 1000, offset: 13000}) .setTween(svg7) .addTo(controller); var svg8 = TweenMax.to(".svg-1, .svg-2, .svg-3, .svg-4 " ,1, { rotation: 900}); var sceneSvg8 = new ScrollScene({ duration: 1000, offset: 13000}) .setTween(svg8) .addTo(controller); var svg9 = TweenMax.to(".svg-1, .svg-4 " ,1, { left: "0%" }); var sceneSvg9 = new ScrollScene({ duration: 1000, offset: 16000}) .setTween(svg9) .addTo(controller); there has to be a more organized way of doing this...i have pages of code that looks like that lol.... also im not sure if all the repeated code is even neccesarry....some help would be greatly appreciated

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

I wonder, it's this possible. I've been reading about how good is this platform and I also read about how this plugin could improve performance even though it's a JQuery native code.

The problem seems to be in my event handler "move_box". The event listeners were apparently added, if I manually replace the i in menu with a 0 or 1 in the move_box function clicking the buttons cause the boxes to move. I have this up on JSFIddle http://jsfiddle.net/jimeast123/F4WkU/1/ <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> <style type="text/css"> .box { margin: 0px; height: 50px; width: 50px; background-color: blue; } li {list-style: none;} .inner {; display: block;} .inner li, .box {display: block;} #outer li { display: inline-block;} </style> </head> <body> <ul id="outer"> <li><button type="button" class="toggle" name="btn1">Open</button> <ul class="inner"> <li><div class="box"></div></li> </ul> </li><!-- end of outer li --> <li><button type="button" class="toggle" name="btn2">Open</button> <ul class="inner"> <li><div class="box"></div></li> </ul> </li> <!-- end of outer li --> </ul> <!-- end of outer --> <script> var menu = document.getElementsByClassName('box'); var btn = document.getElementsByClassName('toggle'); function move_box(e) { if(this.innerHTML === 'Open') { TweenLite.to(menu[i], 2, {y: 100, ease:Power2.easeOut}); this.innerHTML = 'Close'; } else { TweenLite.to(menu[i], 2, {y: 0, ease:Power2.easeOut}); this.innerHTML = 'Open'; } } for (var i = 0; i < btn.length; i++ ) { btn[i].addEventListener("click", move_box, false); } </script> </body>

Hi everybody! By advance, please excuse: 1. my english (I'm french, and I don't find any good answers about Gsap on french forums...) 2. my less of knowledge about coding... I know what is Code for.. 2 weeks.. 3. my (a bit) blonde brain.. But I got faith and I'm ready to learn!!! So, here's the situation: My final goal is to make a full personalized menu for my blog, that contains very seamless animations. The first animation (which I'm testing now) is color changing of the buttons' letters. The second one will be the "deployment" of an image that "get out" behind each button and then come in. Both animations will start "on mouse over" and when the button is clicked and the relative page is activated. My first question is about the first, simple animation: color of the buttons. What I'v already done: - created a drawn menu on Gimp - created the same image but with each button in right color for activated state - I've search for a few weeks on tutorials and forums, and found a code that works "A code that works"... BUT: it seems to work only on certain machines (don't understand why it works on my mac on Google Chrome but not on my office's PC on Google Chrome too!) and most of all, it is no seamless at all! (got to wait a few seconds with mouse over before the -images charge and- color changes. I read some interesting stuffs about the "wonderful Gsap library". But it's very difficult for me to understand how to make the right gsap code that is very complicated for me compares to my actual code (I don't even know if it's "simple javascript" code or something else - you will see that). Could you please give me a simple explanation of what I need to do in my case, or even indicate the right code to me..? Here's my code: <div> <img name="Menu" src="https://photos-4.dropbox.com/s/mpmuozbm5zaaj6j/base%20onglets%20translucides%20koba%C3%AF%20crash%20test%20gelly%20texte.png" width="960" height="95" border="0" usemap="#menu jelly kobai" /> <map name="menu jelly kobai"> <area title="Accueil" shape="rect" coords="4,27,117,93" href="http://kobai-uneblondeetblogger.blogspot.fr/" onmouseover="document.Menu.src='https://photos-4.dropbox.com/s/dsltunaowxbg0e3/menu%20bouton%20accueil%20survol.png'" onmouseout="document.Menu.src='https://photos-4.dropbox.com/s/mpmuozbm5zaaj6j/base%20onglets%20translucides%20koba%c3%af%20crash%20test%20gelly%20texte.png'" onclick="document.Menu.src='https://photos-4.dropbox.com/s/dsltunaowxbg0e3/menu%20bouton%20accueil%20survol.png'" alt="Accueil'" /> <area title="Une Blonde et Blogger" shape="rect" coords="128,27,245,94" href="http://uneblondeet-blogger.blogspot.fr/" onmouseover="document.Menu.src='https://photos-4.dropbox.com/s/f9khuaph4qqhnk3/menu%20bouton%20blonde%20survol.png'" onmouseout="document.Menu.src="https://photos-4.dropbox.com/s/mpmuozbm5zaaj6j/base%20onglets%20translucides%20koba%c3%af%20crash%20test%20gelly%20texte.png'" Onclick="document.Menu.src='https://photos-4.dropbox.com/s/f9khuaph4qqhnk3/menu%20bouton%20blonde%20survol.png'" alt="Une Blonde et Blogger" /> <area title="Onglet test" shape="rect" coords="255,27,369,94" href="http://kobai-uneblondeetblogger.blogspot.fr/p/un-onglet-test.html" onmouseover="document.Menu.src='https://photos-4.dropbox.com/s/7h3uglfwgxjk0uu/menu%20bouton%20onglet%203%20survol.png'" onmouseout="document.Menu.src="https://photos-4.dropbox.com/s/mpmuozbm5zaaj6j/base%20onglets%20translucides%20koba%c3%af%20crash%20test%20gelly%20texte.png'" Onclick="document.Menu.src='https://photos-4.dropbox.com/s/7h3uglfwgxjk0uu/menu%20bouton%20onglet%203%20survol.png'" alt="Onglet test" /> </map> </div> Sorry for the entire code, I've searched in it but didn't find this widget's code - ?? (it's a HTML/Javascript widget in a Blogger blog. url of my "testing" blog: http://kobai-uneblondeetblogger.blogspot.fr Thanks a lot by advance for your help! Trinita Girl