Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'ie8'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. Apologies if this has been covered before, could't locate it in the forums or on StackOverflow etc. Currently working on a nice little horizontal slider that controls animations for an e-learning project. Unfortunately we work for big pharma who still mandate IE8 support (I know ). Anyway, it seems I've come across a little bug where on using the onThrowComplete method to calculate the end position via this.endX / this.maxX * markers.length fails in IE8. On closer inspection is appear this.maxX returns NaN in IE8. Anyone have any ideas as to what's happening? Cheers
  2. Hi Everyone, I think i found a bug in the latest version of draggable. When i went to test my latest project in ie8 the hit test did nothing in that browser. Worked fine in all others. I am using the newest version you can download. No errors where thrown up or anything like that. I could still drag everything but once i drag the div over the hit location nothing happened. When i switch to an older version of draggable it worked just fine. I know the release notes on 1.18 says it was fixed but it didn't work for me. I created a codepen: http://codepen.io/anon/pen/epdBgP but it seems code pen doesn't work in IE8. So i attached the export zip of this. What should happen when you move the red div to the white one an alert should pop up, but it does not in ie8. If i'm coding something wrong let me know! Thanks, Brad
  3. Hi! I'm working to new animation engine! Cross-browser and back to IE8 support for transform (rotate, scale, translate), but it's always uses transform-origin is 50% 50% or 0px 0px! I obtained and installed TweenMax.js CSSPlugin IE8 transform script and works on any transform-origin! My project is MIT-Licensed. Is it possible use code on my project free or need BUY license or completely restricted? Sorry for bad english!
  4. Hi, in my current HTML5 project I need especially the scale and rotation skills from GSAP and one of the requirements is, that it have to run on IE8. Now I took notice that it doesn't works. I tested it at first in IE11 and emulating IE8 and after that I used an real IE8. In all other current browsers it works fine, include in IE11 and emulated IE9 and 10. The code, you can see in my codepen example isn't complex. What I made wrong or is it impossible in connection with IE8? Thanks for information to this problem. Best regards. Tilo
  5. Hello, I'm having a problem with a TweenMax in ie8. i'm not sure if it's a "color" tween error or not though. The error message is: Invalid property value. TweenMax.min.js Line: 16 Char: 838 The website is: http://www.paragoncasinoresort.com/ I'm kind of stumped here as to what that could be. It's working on all other browsers including IE9+. Any help would be greatly appreciated. Thanks, Sam
  6. Hi all! I need help with this, I have tested in Chrome, Safari, Firefox, and IE9+ and works magically. But when I tested in IE8 specifically, the animation breaks. I have tried everything I could came up with but I'm stocked. Demo Link: http://theoremcreations.com/undertone/16002/ss/demo/ CodePen Link: http://codepen.io/anon/pen/lnIHg Animation_Demo.zip
  7. CodePen (I don't think this site supports IE8, so this may not be useful): http://codepen.io/anon/pen/kxhfD Problem Opacity isn't animated when there is an x-translation in Internet Explorer 8. Code // no opacity animation in IE8, works in modern browsers var element = document.getElementById('box'); var animation = { x: -50, opacity: 0 }; TweenMax.from(element, 1, animation); a Extra note If you replace the x with marginLeft, the opacity correctly animates. > Thank you so much for all the hard work, guys. It's really, really appreciated. <
  8. Hi guys, I am animating a div with a transparent background (the ball). When I use rotation the transparent background seems to get a black background in IE8. This only appears when I use css rotation in my animation. Is there someone who have seen this before and knows how to get rid of this problem? Is it possible to use rotation in any other way than css? This is what my animation looks like; tlBall.to(ball, 0.2, {css:{left:"400px",top:"366px",rotation:360}, delay:0, ease:Sine.easeInOut}) This is that the background with the ball looks like; http://cl.ly/image/1U2a0w0T3O17/image004.png Thanks! - Marcus
  9. Hey all, I'm hitting a very frustrating wall trying to make my tweens work in IE8. When attempting to transform my elements with the x and y properties, I get "error: Invalid argument" on line 1308, which I've traced back to line 1236. It seems that at the beginning of _setIETransformRatio, the _gsTransform object already has the value 'NaN' for its x (or y) property. Strangely, the properties show the correct values right up until the tweens begin, but as soon as they do, the values become NaN. I've searched the forums to no avail. I don't think it's my CSS, as the problem still shows up if I disable it all. Also worth noting is that my timeline is actually paused and controlled by the user's scroll position. Working on putting together a codepen, but any help in the meantime would be greatly appreciated!
  10. Hi, I have been moving old Flash projects over to using HTML and JS. My projects use a lot of drag and drop interaction so GSAP is fantastic for me. I am having difficulty getting it to work with IE8 (works perfectly with modern browsers). I have narrowed down the problem to be with the hitTest function that causes the error: Object doesn't support this property or method Is hitTest something that doesn't work with ie8 or should I be looking elsewhere for errors? Thanks, Matt
  11. marcusfriberg

    IE troubles

    Hi guys, I am having some IE problems and would like some support. In IE 7 and 8 the blue "panels" containing price and the text "Boek nu!" in the last frame shows through the whole animation. This works fine in Safari, GC, FF and so on, but not in IE 7 and 8. The only issue in Safari, GC and FF is that these panels show up for like a millisecond in the beginning of the sequence. I guess the both issues has anything to do with the css property "visibility", but I can't get it to work. Can someone please look at my animation and check for what could be wrong and what could fix this. This is the URL to my animation: http://marcusfriberg.com/greensock/ie-test/ Please look at it in Safari, FF, GC or newer IE to see what I want it to look like, except for that issue in the beginning where the panels show for a millisecond sometimes, and compare that to how it looks in IE 7 and 8. Please let me know if there is something that is unclear. Thanks for any kind of help! - Marcus
  12. HI there, I'm experiencing a bizarre issue with IE8 and the rotation transform code that GSAP is producing. I'm trying to narrow it down to either my bad code, IE8 or a possible bug in GSAP. It may be my code but that's why I'm asking here. The problem is with the first rotation transform on an image. It's not keeping the image centered using the margin offset in the rendered code. Calling the rotation command a second time, however, inserts the correct margin centering code. Take this line of code: TweenMax.to( '#stairs-container-bottom', 0, { rotation: -30 } ); I'm seeing it render out this initially for IE8: filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.86602, M12=0.49999, M21=-0.49999, M22=0.86602, sizingMethod='auto expand') ; MARGIN: 0px; ZOOM: 1; DISPLAY: block The problem I'm seeing is the margin is set to 0, causing the graphic to be offset from the center rotation point visually. If I call the rotation command again, it renders out with the correct margin to keep the image centered: filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.86602, M12=0.49999, M21=-0.49999, M22=0.86602, sizingMethod='auto expand') ; MARGIN: -31px 31px 31px -31px; ZOOM: 1; DISPLAY: block; Has this been reported before? Is it something I'm doing? I'm testing this in a VMWare image of Windows 7 with an IE8 install version 8.0.7601.1.17514 Thanks for any direction
  13. Hi there - I have an animation using tweenlite to tween some divs that contain png w transparent backgrounds. This looks great in all browsers expect IE8 there are blackout lines around the pngs. I know there are fixes for jquery fades and whatnot in IE8 for transparent PNGs, however none of the ones i've tried work on my file. Here is the timelinelite doing the tweening: var tl = new TimelineLite(); tl.to("lens_flare1", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare3", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare3", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare2", .25, {alpha:1, scaleX:1.3, scaleY:1.3}) .to("lens_flare2", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare4", .25, {alpha:1, scaleX:1.4, scaleY:1.4}) .to("lens_flare4", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare2", .25, {alpha:1, scaleX:1.3, scaleY:1.3}) .to("lens_flare2", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare1", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare4", .25, {alpha:1, scaleX:1.4, scaleY:1.4}) .to("lens_flare4", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare3", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare3", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare2", .25, {alpha:1, scaleX:1.3, scaleY:1.3}) .to("lens_flare2", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare1", .25, {alpha:1, scaleX:1.6, scaleY:1.2}) .to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare4", .25, {alpha:1, scaleX:1.4, scaleY:1.4}) .to("lens_flare4", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare3", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare3", .25, {alpha:0, scaleX:1, scaleY:1}) ; and here is the css #lens_flare1 { opacity:0; position:absolute; left:22px; top:5px; background:transparent url('images/lens_flare.gif') no-repeat; width:59px; height:53px; } #lens_flare2 { opacity:0; position:absolute; left:73px; top:10px; background:transparent url('images/lens_flare.png') no-repeat; width:59px; height:53px; } #lens_flare3 { opacity:0; position:absolute; left:118px; top:21px; background:transparent url('images/lens_flare.png') no-repeat; width:59px; height:53px; } #lens_flare3 { opacity:0; position:absolute; left:118px; top:21px; width:59px; height:53px; background:transparent url('images/lens_flare.png') no-repeat; } #lens_flare4 { opacity:0; position:absolute; left:233px; top:50px; width:59px; height:53px; background:transparent url('images/lens_flare.png') no-repeat; } Any tricks for this? Apologies for not posting to Codepen but have super limited time at the moment to get setup on that - Any help is greatly appreciated. ~julia
  14. Hi there - I have a file that works just how I want in all the browsers. However I must support back to IE8. The animation is not working at all in IE8. 9 is fine 10 is fine.. but 8? Totally broken. Elements appear randomly on the page and do not animate at all. Please help. Here is my code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>GreenSock: My films</title> <!--css goes here --> <style> #container { width:924px; height:250px; background-color:#000000; opacity:0; position:relative; } #my_films { width:875px; height:422px; opacity:0; margin-top:55px; margin-left:20px; } #season2 { width:285px; height:44px; margin-top:0px; margin-left:19px; } #grantland { width:304px; height:44px; margin-top:5px; margin-left:0px; opacity:0; } #packshot { width:365px;; height:265px; position:absolute; left:335px; top:20px; opacity:0; } #holiday { width:142px; height:16px; position:absolute; left:722px; top:84px; opacity:0; } #starts { position:absolute; left:714px; top:104px; opacity:0; } #buy { position:absolute; left:747px; top:210px; opacity:0; } </style> </head> <body> <div id="container"> <div><img src="images/my_films.svg" id="my_films" /></div> <div id="season2"><img src="images/season2.png" /></div> <div id="grantland"><img src="images/grantland.png"></div> <div id="packshot"><img src="images/packshots_lrgest.png" /></div> <div id="holiday"><img src="images/holiday.png" /></div> <div id="starts"><img src="images/starts.png" /></div> <div id="buy"><a href="#"><img src="images/buy.jpg" /></a></div> </div> <!--- The following scripts are necessary to do TweenLite tweens on CSS properties --> <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> window.onload = function(){ TweenLite.to(container, 1, {autoAlpha:1, ease:Quad.easeIn}); TweenLite.to(my_films, .75, {width:177, height:44, alpha:1, ease:Power1.easeIn, delay:1}); TweenLite.from(season2, 1.5, {alpha:0, delay:2.2}); TweenLite.to(grantland, .5, {x:19, alpha:1, delay:3}); TweenLite.to(packshot, 5, {alpha:1, ease:Power4.easeIn}); TweenLite.to(holiday, 1, {alpha:1, delay:4}); TweenLite.to(starts, .75, {alpha:1, delay:4.8}); TweenLite.to(buy, .5, {alpha:1, top:142, ease:Back.easeOut, delay:5.5}); } </script> </body> </html>
  15. Im having trouble with TweenMax in my require.js setup. Everything is working in modern browsers, but IE8 is complaining. I have already documentet the problem on stackoverflow: http://stackoverflow.com/questions/21204786/require-js-tweenmax-ie8 Any ideas?
  16. Hello, I'm trying to get the offset properties of an element that is scaled and moved with Greensock. Unfortunately, under IE8 return values ​​are wrong. How do I get this offset? Someone has already encountered this problem? Thank you for your help
  17. Not sure if this is me or not, so I wanted to check it out. I am more or less doing an animation with a sprite map. When trying to change the backgroundPosition in IE8 I get an error. But changing the backgroundPositionX and Y individually is fine. Here is my code: var flame = document.createElement('div'); . . . flame.style.overflow = 'hidden'; flame.style.backgroundImage = 'url("my_files/images/flame.png")'; var tl = new TimelineMax( { repeat:-1 } ); tl.to(flame, 0, { css:{ 'backgroundPositionX':'-5px', 'backgroundPositionY':'-7px' } }, 0); //no error in IE8 tl.to(flame, 0, { css:{ 'backgroundPosition':'-17px -4px' } }, .1); //error in IE8 The error is: SCRIPT5007: Unable to get property 'backgroundPositionX' of undefined or null reference TweenMax.min.js, line 15 character 22204 Please let me know if I'm coding this wrong. Thanks!
  18. Hello, I do not have any real internet explorer 8, just the compatibility mode of IE10 on a Windows 7. I saw on the forum that it could have some issues with the compatibility mode. Thus, I wonder if someone could confirm or not that this example below works on a real IE8 (and IE7 if possible) The problem I have is that the rotation does not work. There is strange behavior. <!DOCTYPE html><html><head> <meta charset="utf-8"><meta name="viewport" content="width=1000" /> <title>ROTATION</title> <style>body {margin: 50px;background-color: #000;font-family:Arial, Helvetica, sans-serif;}#box {position: absolute;}</style> </head> <body> <button id="rotate">rotate</button> <div id="box"><img src="http://www.snorkl.tv/images/crab.png"></div> <script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.2/TweenMax.min.js"></script> <script> $(function() { $("#rotate").on("click", function() { TweenLite.to("#box", 0.95, { directionalRotation:'+=90_short', ease:Power3.easeOut }); }); }); </script> </body> </html> Best
  19. Hello, Thanks for porting GSAP to JS! I used it for years in AS and was really excited to start using the JS version. I've already deployed it to several projects with great results. I have run into my first road block, however, and I'm hoping someone may be able to assist. I've created a timeline animation that is controlled by a jQuery UI element (draggable). It works great in all browsers except, you guessed it, IE8. In IE8, the timeline will scrub forward with no problem, but will not scrub backwards in the timeline. I've confirmed that the value I am sending to progress() is properly decrementing, and I'm not sure what else I can do. My code is below: tl = new TimelineLite(); // Create a TimelineLite instance // Construct timeline from gallery items $gallery.find('img.nfu-gallery-item').each(function(){ if(!$(this).hasClass('first-item')){ // Do not include first item, fade in not needed tl.to($(this), 1, {opacity: 1, delay: 1}, '-=0.5'); } }); tl.progress(0.5); // Move timeline to 50% tl.pause(); // Pause timeline // Update timeline position var timelinePosition = function(handlePos){ percentLocation = (handlePos / sliderWidth); tl.progress(percentLocation); } // Create jQuery UI draggable element for slider $handle.draggable({axis: 'x', containment: $gallery.find('.nfu-gallery-slider'), create: function(){ $handle.css('left',sliderWidth / 2); // Create UI element at middle of slider }, drag: function(){ timelinePosition(parseInt($handle.css('left'))); // Update timeline position when UI element is dragged } }); Does anyone have any thoughts on why the timeline won't scrub backwards in IE8? Or, perhaps an alternative approach to take for IE8 that will achieve the same effect. Thanks in advance!
  20. Hey Guys, Ran into a problem where IE8 is not scaling an image. I've read several posts but nothing seems to work (element must be absolute, etc...) Here is a super basic example... http://duke.innovah.com/dukeregional/test.html Here's the JS: $(document).ready(function() { var bool = true; $('#campus').click(function(){ var _scale = (bool) ? .7: 1; TweenLite.to($('#campus'), 1, {scale:_scale}); bool = !bool; }); }); Works in all tested browsers except IE8. In IE8 the image pans a little but no scaling. I've also tried using scaleX and scaleY instead of scale. Note: I'm using IE10 in Browser Mode: IE8 and Document Mode: IE8 standards. When IE10 is in "compatibility" mode the issue also occurs. Any help or workaround is greatly appreciated!
  21. I'm using this simple code to make my div button fade in and off automatically and it suppose to repeat itself....... var tl = new TimelineMax({repeat:-1}); tl.from($('#slideScrollBtn'), 1, {autoAlpha:0}) .from($('#slideScrollBtn'), 1, {autoAlpha:1,ease:Power1.easeOut}); it works fine in chrome and firefox but when I tested in IE8 the animation works fine in the first 2 rounds then it stuck. Where did I go wrong?
  22. Hi, I'm having troubles when resizing images inside a div on IE7/8, working fine on other browsers. I've got a wrapper div with a background and containing several images, you can zoom the wrapper and all the images inside will scale accordingly. Well, this zoom effect when in IE7/8 is not working properly, when I zoom the wrapper the content is not scaling (always 100%) but the background is zooming in and out correctly. This is the structure: <div id="wrapper"> <a href="">image1</div> <a href="">image2</div> <a href="">image3</div> ... </div> Thanks in advance.
  23. Hi, Just started using Tween for JS, used to use AS version, so i was exited to find a JS version First of all works great, BUT I am having som problems with IE8 (( Basically I am trying to scale a Image from small to VERY large. To maintain relative good quality i have initially scale the image down, and I am then using scaleX/scaleY to scale the image up in size. Works like a charm in Safari, Chrom, Firefox and IE9, BUT breaks in IE8 Seams like IE8 is scalling very poorly, very bad quality when scaled up, but WORSE it seems to hide the overflow, so one can only se the image, in the area where the original image was You can see for yourself here: https://dl.dropboxusercontent.com/u/2146283/html/example.htm and fiddle here: http://jsfiddle.net/ha4PT/8/light/ Hope someone can help, would really prefer this over jquery UI Kind regards Mr.Morton
  24. Reporting a bug here. On IE8 my animation complete kills the experience, throwing a runtime error popup. Works fine though on Chrome and proper browsers. I'm doing the following: animateInBars : function(callOnComplete){TweenMax.staggerFrom( dom_element.find('.barchart-bar'), 0.5,{height:"0%", ease:Elastic.easeOut}, 0.01, callOnComplete);}, The animation works fine, but when the onCompleteAll kicks in, it crashes. IE8 throws this at me: Object expected TweenMax.js, line 308 character 7 That corresponds to this code on line: onCompleteAll.apply(onCompleteAllScope, onCompleteAllParams); So I tried adding an empty array for the onCompleteAllParams: animateInBars : function(callOnComplete){TweenMax.staggerFrom( dom_element.find('.barchart-bar'), 0.5,{height:"0%", ease:Elastic.easeOut}, 0.01, callOnComplete, []);}, And that fixes it
  25. Currently I'm attempting to use autoalpha on a div containing text but have found that once the tween has completed the text doesn't have any aliasing applied to it. Is there any way to fix this? Do I have to remove the filtering completely somehow? I'm currently testing in IE8, as it works fine in Firefox and Safari. Thanks in advance.