Jump to content
Search Community

3d transform on IE11

Raymond Chow test

By Raymond Chow
in Banner Animation

Moderator Tag
 Share

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

Raymond Chow test

Raymond Chow

Posted
Posted

Hi, so I've been trying to get 3d transforms to work in IE11. But for whatever reason IE doesn't seem 

to do anything. From what I'm seeing after a few google searches is that the 3d transforms is a bit wonky

on IE. All seems to work fine in Chrome and Firefox though. Any help/insight would be appreciated.

Thanks

-ray

<html>
<body>
<style type="text/css">
#picContainer {
overflow: hidden;
width: 300px;
height: 600px;
border: 1px solid black;
}


.pic {
position: absolute;
}


#pic01 {
width: 300px;
height: 600px;
background-image: url("1.jpg");
}
#pic02 {
width: 300px;
height: 600px;
background-image: url("2.jpg");
}

</style>

<div id="picContainer" >
<div id="pic01" class="pic"></div>
<div id="pic02" class="pic"></div>
</di>

<script src="js/EasePack.min.js"></script>
<script src="js/CSSPlugin.min.js"></script>
<script src="js/TweenLite.min.js"></script>

<script type="text/javascript">
var pic01 = document.getElementById("pic01");
var pic02 = document.getElementById("pic02");

TweenLite.set(picContainer, {transformStyle: "preserve-3d"});
TweenLite.set(picContainer, {perspective:800});

TweenLite.to(pic01, 1, {rotationY:60, transformOrigin:"50% 50% -260px", delay:1});
TweenLite.to(pic02, 1, {rotationY:0, transformOrigin:"50% 50% -260px", delay:1});


</script>
</body>
</html>

 

Link to comment
Share on other sites
joe_midi test

joe_midi

Posted
Posted

Colleague of mine had this issue recently with IE11 compatibility, but basically from http://caniuse.com/#feat=transforms3d preserve-3d doesn't work in IE11, so you'll end up with a buggy animation in IE11, so unless you can come up with a better cross-browser solution, you'll need to drop use some browser sniffing to detect IE11 and show those users a different animation.

 

 

Also, you should try using http://codepen.io/ for your examples, that way people have a better understand of what you're trying to achieve and could come up with a different solution a lot faster. Like this: 

See the Pen yeJzNB by joemidi (@joemidi) on CodePen

 

@Carl wrote a lovely doc on how to create a codepen: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

  • Like 2
Link to comment
Share on other sites
Raymond Chow test

Raymond Chow

Posted
  • Author
Posted 
Hey OSUblake, Thanks for pointing out that thread. Very useful. In my case I finally did get it to workby using the following in the beginning of the html file:<meta http-equiv="X-UA-Compatible" content="IE=11" />

For some reason IE was defaulting to IE 9 as the document mode (i saw this in IE's debugger) with the previous

meta tag I was using:

 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 

DoubleClick's QA people viewed it in IE11 as well but was getting results as if viewing in IE9. I can't say I understand the reasons for why

it all works this way because it all seems really silly to me. It was all driving me crazy for a better part of the day since  I saw other banners

using similar effects that worked on IE.

 

-ray

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
 Share
Go to topic listing

  • Recently Browsing   0 members

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