Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  
spiderstave

Timeline scrubbing will not reverse in IE8

Recommended Posts

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! 

Link to post
Share on other sites

Of course, as soon as I post to the forums I figure it out :P 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');
  }
});
  • Like 2
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×