Wigchert

Hi guys, At the moment I'm working on a rotator that rotates between 3 tabs with a 3D perspective (middle tab in the front and 2 on the sides that are in the back). It's all working fine on the platforms and browsers I've tried except for Chrome (both Windows and Mac). The problem there is that one of the side tabs is not rendering on the Z axis while if you inspect it in dev tools the overlay shows the tab in the right position. Here is how it is supposed to look: http://puu.sh/bAamR/98bab7014e.png Here is how it actually looks: http://puu.sh/bAaod/da2a27ac77.png And here is a working demo file I've put online: http://lwigchert.nl/test/demo_issue.html It might be an issue with the z-index because when you play around with that the tabs seem to switch. If there is anything else needed that may help, let me know!

Haha, thanks, that makes me feel somewhat proud

Hey Thanks for the reply Good to hear that it is not a problem with the Greensock plug-in. Is this a common bug with Chrome? When I tried searching for my problem yesterday I did not read anything about it. Maybe I was just looking on the wrong places Anyway, thanks for the fix! I'm going to apply it right away. Haha, thanks, quickly identifying the problem is what helps me the most. I just wanted to be as clear as possible to avoid confusion

Hey! First of all, this isn't an animation or tween problem but as there is no other Javascript section, I'm posting it here. Also I'm not entirely sure that it is caused by TweenLite but it is happening in my TweenLite line of code. I have an image and I want to generate a reflection effect for it so I duplicated the image, mirrored it and reduced the opacity through TweenLite (makes it so much easier!). In all browsers I have tested it so far it works fine (including IE7) but in Chrome it's behaving weird. The reflecting image is at the bottom of my page and should partially exceed the bottom border of the DIV it is in. What Chrome does is that the image itself does not go further down than the border of the content div but the canvas or area of the image does go down. This results in clipping the image. This could be an issue with the css I'm applying with the TweenLite line or it could be the way TweenLite handles it. If I comment out the line with where the TweenLite css is set, it gets positioned over the border just fine, but obviously without the right css attributes. Here is the Jsfiddle: http://jsfiddle.net/qTE2m/ here are screenshots of what I mean: Chrome: http://puu.sh/1xI15 FireFox: http://puu.sh/1xI24 The black line at the bottom is the border of the div the image is in.

Hey Jack, Thanks so much for those files! Wasn't able to test them over the weekend but did it first thing today and it works great! I'm looking forward to play around with the new features, I'm sure it's going to be a lot of fun Thanks for the great support, really impressed! Cheers Edit: after some more testing so far I have noticed one thing. The gradient still disappears when an opacity tween is called instead of a scale tween in my original post. I believe this is caused by overwriting filters in IE?

At the moment our ads are SWF files with a gif fall-back and we are aiming to what you explained in workflow 2. Our platform allows us to target audiences very very narrowly, that means also based on what browser they use. We already have some html banners running and they are doing very good. I'm so thankful that the company I work at decided to not target IE6, saves me a great deal of work IE7 and 8 are a pain but still do-able. It's true that the HTML banners do not perform optimal in the older browsers but if that means we can have interactive and interesting banners on mobile devices, so be it. The features of HTML5 look very promising, specially for mobile (which is going to be my aim eventually), Access to the accelerometer/gyroscope, saving pictures to local photos, adding calender events and in-ad videos. All these features can be used to make very effective ads on mobile platforms and will be even more so with the new upcoming MRAID 2.0 standard. After running several tests on mobile devices and normal PC's I haven't found any limitations or problems regarding TweenLite yet but if there is anything to make it perform better, bugs and what not, I will let you guys know I do have one question regarding the licence, when is one needed and when not? Would it be needed for publishing ads? Thanks for creating such an awesome tool and making my work a lot easier and more fun

Ok, so I just installed VirtualBox with images of windows versions of IE6,7 and 8. In those browsers my button doesn't even show up at all. edit: but my jsfiddle in the previous post does show up, time for some debugging. edit2: well, after some debugging and eventually pulling the hair out of my head I found out what was going wrong in IE and it's a bit awkward to say I actually forgot that console.log didn't work in the old versions of IE... So, I have the tween working now but one problem remains and that is the gradient disappearing whenever the tween starts, it's really weird.

Hey, Thanks for the replies and I'm sorry it took me a while, wasn't near a pc yesterday. The buttons are placed absolute in my template. Unfortunatly I don't have a way of testing in the real IE7 and IE8, I have been using IE10 developer tools. I conclude from your reply that this causes problems? When I change the button to scale down instead of up, it has the same result but moves to the lower right corner instead of the upper left. Now I'm just left wondering if this is a limitation of the developer tools of IE. This button class is eventually meant to be used inside html based banner ads and our statistics show that still roughly 12% of our total impressions use IE7 and 8. This is still quite a large number not to be neglected. So at the moment I'm researching how viable html-based ads are and what the pros and cons are. I have created a part of the class in jsFiddle as good as I could: http://jsfiddle.net/mFyRh/3/ For some reason I couldn't get the TweenLite to work in the fiddle... I'm really impressed with the Javascript version of TweenLite. Coming from an AS3 background working with this feels very familiar

Hey everyone, At the moment I'm working on a small class for myself to make different animated buttons with javascript, html and css (personal pre-made buttons to add them to project in the future). I'm making as much different animation I can think of growing, shining, depth, vibrating etc etc... I am now at the part where I am making them compatible for all browsers as much as possible (it's horror...) and working on a button that scales larger on mouse over. In all browsers this works perfectly fine except in IE7, IE8, and most likely IE6 too but I cant test that one. In these browsers the button does animate somewhat but does not expand and when it animates it removes the gradient filter that was on it... I have no idea how to enter this in jsfiddle, it's fairly complex :/ Because I want it to use as few files as possible and only want 1 line of code in the main document to call a button from the class, I generate the html and css of the button inside the JS file. The gradient I use for IE 7-9 is: gradientIE79 = "filter: progid:DXImageTransform.Microsoft.gradient(startColorStr="+ color2 +", EndColorStr="+ color1 +"); (color1 and color2 get added dynamically) and on the same button I use the follow Tween: TweenLite.to(button1, 0.25, { css:{scaleX:1.15, scaleY:1.15}}); What happens on my screen is that the button does show a sign of scaling, the top left corner of the button (I can see it because it still has a border around it) moves to the left corner to which it is supposed to tween. The problem is that the whole button move to the top left, it just re-positions instead of growing. Not only does it re-position but it also gets rid of the gradient that was on it as soon as the tween starts. I know it's all very confusing and I'm trying to explain it as good as I can. If there is anything not clear or if I left anything out, let me know. Thanks