Jump to content
Search Community

Raymond Chow

Members

  • Posts

    7

  • Joined

  • Last visited

Raymond Chow's Achievements

0

Reputation

  1. Raymond Chow
    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
  2. Raymond Chow
    Thanks Joe, I made some adjustments on the codepen: http://codepen.io/anon/pen/adZLZp Should now accurately depict what I'm trying to go for. -ray
  3. Raymond Chow
    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>
  4. Raymond Chow
    I almost thought whole numbers for the scale would be partial workaround but it seems that's not the case. I used 3 to scale up to for the mouse over and it would do the slight jitter at the end of it: http://codepen.io/anon/pen/jKDFn It's too bad about it being a Firefox bug. Seems like that bug has been there for awhile too. Sure makes it a tad impractical to use scaling in the future unless the designs/type conforms to certain sizes that won't cause it to jitter.
  5. Raymond Chow
    Hey rhernando, thanks for showing me that. I opened up the Codepen example that Jonathan made after following that thread you referred me to: http://codepen.io/jonathan/pen/pqwrs/ It seems like Firefox has the same issue with my first example. Except in this case it happens after you mouse off the hex and it shrinks back down to the original size. The text does a slight shift/jitter thing. I took a video of it to show what I mean but I'm not sure what's the best way to share it on the forums.
  6. Raymond Chow
    Thanks for the reply Jonathan! Oops, I was wondering the force3D didn't fix that on Chrome. It is smooth now on Chrome but now the downside is that it is scaling up what seems to be a bitmap version (I'm assuming this has to do with how the GPU hardware acceleration works?) and looks noticeably blurry. It stays blurry at the end of the animation for me. On Firefox it still has that same slight jump at the end of the animation but doesn't have that blurring issue. IE looks perfect still (I'm in shock by this).
  7. Raymond Chow
    Hi everybody. I'm new to forums here but not to using Greensock. Also in the transition of switching from Flash to CSS/Javascript. I'm finding it to be a rough ride so far. Anyhow, I've been playing around with using CSS transforms via TweenLite/TweenMax and noticed the results seem to vary across browsers. Not to mention the strange animation jitters that happen. Hopefully I'm setting up the codepen correctly (I'm new to that as well): http://codepen.io/anon/pen/evAto/ On Firefox 28 I see a slight jump at the end of the animation. On Chrome the individual letters jump around slightly for the entirety of the animation. "Force3d: true" doesn't seem to help smooth out the animation either. Don't know if it makes a difference but I'm using the PC versions of the broswers I mentioned. Weirdly enough, on IE 11 it seems to run perfectly...totally smooth and not a single bit of jittering. Don't know if I'm just doing something wrong, if it's a browser specific bug, or if it's something on GSAP's end. Any help/insight on dealing with this would be appreciated. Thanks! -ray
×
×
  • Create New...