Jump to content
Search Community

TimelineLite doesn't complete entire timeline only in IE9

vsiege test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I am currently working on a project that makes use of the TimelineLIte to sequence some animations together. While testing, I discovered that only in IE9 (havent tested in 10) that the timelines do not complete their transitions for 3 elements. If you haver over the elements, then you see them finish.


Visit the URL below (please respect the fact that this is a dev link) and click on any number from 1-8 (on the bottom of the page).... in IE9, the Winner banner the percentage cells do not fully reach full opacity. I could really use some assistance working through this problem. Thank you in advance.


Reference URL: http://capone-dev.toolofnadrive.com/#/matchups

Link to comment
Share on other sites



What I can tell you is that I'm seeing it OK with IE9 and IE10.


Also there's a lot of stuff going on in your app (let me say that looks amazing!!) and I'm not too much of a MVC guy and never seriously used underscore or backbone (presuming that you're using it) so I can't say what could be interfering with GSAP if any.


The GSAP part of your code looks good to me, basically you declare your tweens and then add them to the timeline _view_tl_0, then you add a callback that tweens the winner banner according to the match-up result. I don't know if you have any other mouse event or app call that creates a tween or manipulates the banners.


The only reason I could think that the banner and the other elements animations that you mentioned, don't work is because something is overwriting that particular tween or the timeline itself; the other two timelines work as expected or you're having trouble with those too?.


One thing you could do is adding onComplete calls for the particular tweens and the timeline to check if they complete and track with an onUpdate call the properties being tweened in order to see where the animation stop working as expected.


Also it'll be great if you could create an isolated codepen or fiddle in order to get a better view, because is hard to pinpoint what could be the problem in a full working app.


Hope this helps,



  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

Im also seeing this issue in Safari 6 and 5.


When the Matchups view first loads.... the percents arent visible until the user rolls over the black rectangle with red 'Vote Now' button.


Any thoughts? 

Link to comment
Share on other sites

I just updated to the latest build and posted it the build url above.


In Safari: Version 6.0.5 (7536.30.1)

1. Click Matchups (do not move your cursor over the view)

2. Now, visually find the black rectangle with the red and white Vote buttons. Above them there is a percent that is not fading in unless the user moves the cursor over it.


Any ideas? Thanks for looking into this.

Link to comment
Share on other sites



The black boxes appear to have their opacity set to 1 and visually they are not transparent at all, which leads me to believe GSAP is working fine.


1 of the items you are tweening is this:

<div id="chall_percentageCellA" class="chall_percentageCell" style="opacity: 1; display: table-cell; ">
Which has child <span>s that contain the text that is NOT showing up. 
I would edit the styles of the elements that aren't visible and start removing properties like -webkit-font-smoothing. (i highly doubt that is the problem)
As a test maybe put an image in the chall_percentageCellA and see if it appears after its parent is tweened, just to see if this effects all types of child elements... or just the text.
This seems like its a weird rendering issue and not some bug in the engine where tweens / timelines are just stopping unexpectedly, still I can see how it can be plenty of frustrating
  • Like 1
Link to comment
Share on other sites

OK. So this is what I did to remedy the problem on Safari Version 6.0.5 (7536.30.1).


I switched  

_view_tl_1.add(TweenLite.fromTo([_percentCellA_cont,_percentCellB_cont], 0.3, {opacity: 0}, {opacity: 1}), .4);




_view_tl_1.add(TweenLite.fromTo([_percentCellA_cont,_percentCellB_cont], 0.3, {autoAlpha: 0}, {autoAlpha: 1}), .4);


Remaining issue in line with what Im seeing here:

Ipad 1 and 2 on Safari almost none of the timeline animations are even visible for the link above. Almost the entire Matchups view is completely not viewable. This is a critical bug for me. I have no idea what to change. Thanks for your help so far.


Specifically: Safari iPad 2 - iOS 5.1.1

Link to comment
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
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...