Jump to content

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

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:



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

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


As for the panels showing for a quick millisecond this probably has to do with the fact that your elements are rendering before the JavaScript loads and executes.


Take a look here, http://codepen.io/GreenSock/pen/HDBxF you may be able to see this "glitch" if you refresh with a clean cache. You will see that there is some TweenLite code that reveals the image and moves it 200px. Before this js kicks in the image will be all the way to the left. (full page: http://codepen.io/GreenSock/full/HDBxF)


To avoid this flicker you should give those elements visibility:hidden in your css so that they are not shown before the js runs.


When your js runs you can fade from() an autoAlpha of 0 like shown here:



Or you could simply set visibility to visible like

TweenLite.set(element, {visibility:"visible"})



As for why IE7 and IE8 are showing those panels prematurely I'm not sure right now.

It would be much better if you created a reduced test case with just a panel or 2 with very few elements in CodePen so that we can quickly assess what is wrong and test along the way.


More info on how to do that here: http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

  • Like 3
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.