spiderstave

Of course, as soon as I post to the forums I figure it out I'll post the fix below in case anyone else as a similar problem. It came down to being an opacity issue in IE8, which is what the timeline was animating. I was applying the initial 0 opacity through CSS, and with filters for IE8. Apparently IE8 likes it better if the initial 0 opacity filter is applied by GSAP. Changed the code to this and all is well in IE8: // 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 if($('html').hasClass('lt-ie9')){ TweenLite.to($(this), 0, {opacity: 0}); }; tl.to($(this), 1, {opacity: 1, delay: 1}, '-=0.5'); } });

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!