Jonathan

try replacing append() with add(): http://api.greensock.com/js/com/greensock/TimelineLite.html#add() append has been deprecated you can add another add() after your first add()

nice examples Rodrigo.. I was noticing that same behavior last night when i was testing. The Y axis would rotate around its access from the correct transform origin... but the X axis would inter-cross each and not keep the same distance from each other.. It almost looks like its rotating around the Z axis, and the faces are rotating in different clockwise (one going counter clockwise and the other clockwise) maybe we could try the directionalRotation from the css plugin to have the Left and Right faces rotate the same direction... but that still weird how the rotation is rotating around the Z axis instead of the X axis also on your downloaded example .. i noticed that the Left and Right face have that weird behavior and the other faces dont.. on your codepen, when i change inside your .btn1 event for the tween rotationX axis to rotationZ like this: btn1.click(function() { TweenLite.to($("div.face2"), 2, {rotationZ:'+=360', ease:Linear.easeNone}); }); since the behavior is rotating X like Z... so i figure that that by setting the rotation to the opposite of the behavior... i changed the rotationX to rotationZ .. so now the left and right faces rotate like the Y axis its like its rotating the parent of the face instead of the faces itself.. still weird behavior though.. why X acts likes Z and Z acts like X

as far as emptying a value from a property... your correct Jamie, in jQuery if you pass an empty string as the value: $('#mapCaption').css(display,""); it will remove the display property from the style attribute but with GSAP couldn't you use clearProps? TweenMax.set($('#mapCaption',{display:""}); // or TweenMax.set($('#mapCaption',{clearProps:"display"}); or does clearProps only clear properties that have been set with GSAP?

Thank You Rodrigo, I will try just rotating around the X axis first, and get it to first work on one axis, and then build it up for the y and z axis. How did the IE10 CSS only version look in IE10 for you.. http://codepen.io/jonathan/pen/xiJLn .. were you able to see the 3D Cube animate around its axis with that workaround?? I fixed for Chrome so it should work in chrome now! I will test more with your advise, and try to post back here once i play around with the GSAP version more.. Thanks again Rodrigo!

There was a previous post about this. But this is focused more on IE10 transform-style: preserve-3d workaround, so i started it as a separate topic. IE10 does not support transform-style preserve-3d. So to get around it in IE10, you cant just transform the cubes parent... you have to transform each child (face) of the cube separately. I looked at the MSDN Transforms docs (scroll down to transform-style): http://msdn.microsoft.com/en-us/library/ie/hh673529%28v=vs.85%29.aspx On the above Microsoft's Transforms link, Microsoft states: "At this time, Internet Explorer 10 does not support the preserve-3d keyword. You can work around this by manually applying the parent element's transform to each of the child elements in addition to the child element's normal transform." So there is a workaround.. for modern browsers that support transform-style: preserve-3d, you instead apply the CSS perspective function to the cubes parent. But for IE10 that does not support transform-style: preserve-3d.. you have to apply the perspective as a property inside the transform css function. I got it working in IE10. I made an example 3d cube using CSS animation and transform perspective, that does work in IE10 (test this below link in IE10): http://codepen.io/jonathan/pen/xiJLn So problem solved.. Yes and No Yes this workaround works, but No, because, it has to manually be applied with CSS animation keyframes and transform perspective. I dont want to write all this CSS every time i want a 3d cube... So i'm trying to do this with GSAP, and let GSAP do the heavy lifting. Ive been trying to convert this over to GSAP.. but am having issues, due to trying to animate all the faces together. They have to animate in just the right way in unison. Here is a codepen trying to use GSAP and get each face to move as one cube http://codepen.io/jonathan/pen/CbFEo As you can see the sides move out of sync. Just seeing if i can get some help from some of the GREAT minds here, to see if we can all come up with a way to get a 3D cube to work in IE10 with GSAP.. due to the none support of transform-style preserve-3d. It can be done in straight CSS using the perspective property inside the Transform property, using CSS animation keyframes. But i think it would be better to have it all done with GSAP, and make it more dynamic. Thank you to all that can help with this!

Thats cool Rodrigo.. i did not know you could access the _gsTransform object... Nice!

I'm not seeing any PNG artifacts in IE8, like in your screenshot above using your example in jsfiddle, by animating the div with the image as a background-image.

No worries, This forum has a lot of GREAT people willing to help! It's the best forum on the planet, for the best animation platform on the planet!!!

that pulse effect is done with, css animations and keyframes... if you inspect the hexagonal icon span tag... you will see that there is an animation property on it: #main-content .layout .chips .chip.ready .ico-on { animation: 0.8s ease-out 0s normal none infinite halo; } and inspect further in their stylesheet you will see the animation property references halo, which is the name given to the keyframe: @keyframes halo { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } if you try changing the 0.8 to 0.1, you willl notice that the animation glow pulses faster basically on that hexagonal it has 2 spans one with a class of .on and .off the .off always stays visible and then the css animation property just animates the opacity of the .on span that has the the same image as .off, but with a glow on it so when the .on span animates the opacity, you see the pulse effect This same effect can be done with GSAP, which would be better since not all browsers support the css animation property and keyframe rule properly you could have GSAP animate the opacity on and off of the hexagonal 2nd icon with a hover event, when hovered using yoyo:true (go back and forth) and repeat:-1 (infinite) TweenMax.to($(".ico.ico-on"), 0.8, {css:{autoAlpha:1}, repeat:-1, yoyo:true}); you can see a similar pulse effect on a box-shadow css property in GSAP here, scroll down to boxShadow: http://www.greensock.com/css3/ ... In that GSAP is animating the box-shadow property.. but GSAP can animate opacity quite easy i hope the above gives you a better idea how they did that hexagonal pulse effect on that website link from above? you can see how GSAP can accomplish this very easy, and have it be cross browser, with less code...

i am having this same issue with IE8 (IE8 standards) .. where a transform like scale wont scale, but actually translates (moves) the element ... and im testing on 2 actual Windows XP PC's - IE8 standalone - IE8 (IE8 standards) I also see the same rendering issue even on 3 Windows 7 PC's - with IE8 standalone - IE8 (IE8 standards) and also tested with windows 7 - IE10 -- rendering modes -- Browser Mode: IE8 (Document Mode: IE8 standards) And im testing on actual Windows PC's in a non VMware (virtual environment) .. looks like IE8 behaves differently on an actual PC versus a Virtual Environment i have screenshots in another post, and another user has experienced these same issues: http://forums.greensock.com/topic/8178-ie8-and-scale-not-working/?view=findpost&p=31502 http://forums.greensock.com/topic/8178-ie8-and-scale-not-working/?view=findpost&p=31511 I am even having issues with clearProps not clearing properties on actual IE8 (IE8 standards) windows XP and windows 7 PC's.. discussed in this post: http://forums.greensock.com/topic/8173-clearprops-not-clearing-properties/?view=findpost&p=31476 any help will be highly appreciated!

try adding this after your document ready in your common.js... after line 1: var $stripGrid = jQuery('header > .strip.grid_12'); $stripGrid.on("mouseenter",function(){ TweenMax.fromTo($stripGrid, 0.4, { boxShadow: "6px 7px 14px 7px rgba(255,163,163,0.9)" }, { boxShadow: "4px 5px 12px 5px rgba(255,163,163,0.4)", repeat: -1, yoyo: true, ease: Linear.easeNone });​ }).on("mouseleave",function(){​ TweenMax.to($stripGrid, 0.4, { boxShadow: "6px 7px 14px 7px rgba(255,163,163,0.9)", yoyo: true, ease: Linear.easeNone });​ }); you have to adjust teh timing and the box-shadow properties to and from, i based them off of your original box-shadow value

If the png is pulled from a background-image, have you tried setting the initial css for the png to: .imagePNG { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="your image url", sizingMethod="crop"; zoom:1; } or setting the png image css with the set() method? Also usually with IE and opacity its best to also add the zoom property to make sure that element hasLayout. Is your PNG a png8, png24, or png32? also what about animating the actual filter alpha opacity using GSAP, for ie8 its: // ie8 (ie7 standards mode) filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; // ie8 ( ie8 standards mode) filter: alpha(opacity=80); Also if you are dealing with a straight image tag, you could try wrapping the PNG image with a div, and animate the opacity of the parent, instead of the png itself. But if you do this, and the image is a child, add the below styles to the image: opacity: inherit; filter: inherit; this is due to IE's opacity inheritance issues.. or use a background-image on a div and animate the opacity of the div.. I would be very interested in helping find a solution for this, if like Carl said, you attach demo files to test with.. IE8 seems to be the most troublesome IE browser version I hope this helps..

i noticed in on your site you have multiple instance scripts of GSAP. If you include the TweenMax js file.. you dont need to include the CSSplugin, EasePack, and TweenLite js files... When you include TweenMax.. it includes all files (CSSplugin, EasePack, and TweenLite) try just including ONLY the script js file TweenMax.min.js (http://cdnjs.cloudfl...TweenMax.min.js) remove the script tags for (CSSplugin, EasePack, and TweenLite)

thanks Jamie.. Not sure why actual IE8 (IE8 standards behaves differently) .. i have tried it on 2 XP (32 bit) computer, and 3 windows 7 (64 bit) computers at work with IE8 standalone in IE8 (IE8 standards) thanks for the tip on codepen working when in full view mode.. Its weird because i see code pen working and not collapsed like in my screenshot in previous replies.. but now i get this error in the console.. and this is when using actual IE8 (IE8 standards) .. SCRIPT438: Object doesn't support property or method 'totalDuration' TweenMax.min.js, line 14 character 1568 i attached a screenshot of the error thrown in codepen Joe Hakooz in above replies is seeing the same issue.. very weird.. this is weird to, because in a previous post i was having an issue with clearProps not clearing properties in actual IE8 (IE8 standards) ,, listed here: http://forums.greensock.com/topic/8173-clearprops-not-clearing-properties/?view=findpost&p=31476 Also what operating system and type of computer, are you viewing your actual IE8 (IE8 standards) on?? a PC, Mac, or Linux? Is it an actual Windows PC or on a Virtual environment (VMware) ?? thanks for the help and time

i can take a look... but you have to provide a link to your open cart site and explain what element gets the pulse box shadow effect?

have you tried this: var state = true; var tl = new TimelineLite(); tl.to(element, 1, {width:"50%"}) .to(element, 1, {backgroundColor:"#FF0000"}, "-=0.5") // using the call method in the timeline .call(function(){ state = false }) //something like for example .to(element, 1, {width:"50%"}); //or as using the call() method in the timeline : http://api.greensock.com/js/com/greensock/TimelineLite.html#call()

i was looking at the GreenSock code pen examples and they had this cool example that might give you some ideas.. you could try just reversing the position, and have the elements fall from the top instead of the bottom.. http://codepen.io/GreenSock/pen/zrmiG

have you looked at this: http://www.greensock.com/css3/ scroll down to box shadow example and you will see that pulse effect TweenMax.fromTo(greenPulse, 0.7, { boxShadow: "0px 0px 0px 0px rgba(0,255,0,0.3)" }, { boxShadow: "0px 0px 20px 10px rgba(0,255,0,0.7)", repeat: -1, yoyo: true, ease: Linear.easeNone });​ also check this out might give you ideas.. http://codepen.io/GreenSock/pen/HAJgh

Yeah looks great Joe,, Carl, here is another screenshot attached of the scale effect when in XP and Windows 7 - ie8 (ie8 standards) .. you'll notice how the pic shows that the image is moved to the left top instead from scaled from center.. inside the blue border All other iE rendering modes it scales fine.. i also attached the zip file that is being used since codepen cant be viewed on a windows 7 or xp computer in ie8 (ie8 standards mode) Its just weird how the IE8 (iE8 standards) works better on in a virtual environment, instead of an actual computer with windows installed.. Also i noticed in this weird IE8 (ie8 standards mode), that clearProps doesn't clear properties.. i describe that in another post.. http://forums.greensock.com/topic/8173-clearprops-not-clearing-properties/?view=findpost&p=31476 codepen_scale_ie8_ie8_standards.zip

thats so weird Carl.. AWESOME, how you were able to share that video file. Helped alot.. I will compare your build with mine. Looks like your using VMware, Windows 7 64 bit? Is that VMware running on a MAC? I tested on a Windows 7 laptop, Windows XP laptop, and on a Windows XP desktop and both have the same result... My XP IE8 version: 8.0.6001.18702 and im on a actual XP computer... Windows XP 32 bit.. looks like it is behaving different on this version of IE8 and XP 32 bit... I have latest IE for XP. I attached a screenshot showing how codepen renders the page in windows XP. everything is collapsed .. with my version of IE8 (IE8 standards). .. you can see how code pen wont even work on an actual Windows XP machine using render mode of IE8 (IE8 standards). Joe Hakooz was seeing the same thing on his Windows 7 computer, as stated above, ...as was I, when viewing the code pen on my Windows 7 (64 bit) laptop in IE8 (IE8 Standards) ... both windows XP and windows 7 (actual windows operating systems, not vmware) just move the image and dont scale the image.. very weird.. looks like Internet Explorer IE8 (IE8 standards) behaves differently on actual Windows machines versus the VMware environment.. please check out the attached file (image) and thank you so much for your time and help with this!!

thanks Carl.. i mean the image moves from right botttom to left top.. when viewing in windows 7, IE8 (standards) it scales fine.. But in windows 7 or XP, IE8 (IE8 standards mode) the image moves and does not scale But i couldnt get the code pen to work in ie8 (ie8 standards) on Windows XP or in rendering mode Windows 7, ie8 (ie8 standards).. so i had to test locally on both XP and win7 with attached file above.. code pen wont even work in IE if: Browser Mode: IE8 Document Mode: Internet Explorer 8 standards to see what im seeing in windows 7, you have to make sure: Browser Mode: IE8 Document Mode: Internet Explorer 8 standards not "Standards" "Standards" is a new mode in IE10 to see what im seeing in XP, the IE8 default is: Browser Mode: IE8 Document Mode: Internet Explorer 8 standards i am seeing this (and have tested) on 2 Windows XP computers (real ie8 standalone browsers), and 3 Window 7 computers (IE10 with rendering modes) , that have IE set to: Browser Mode: IE8 Document Mode: Internet Explorer 8 standards and then you will see what i am seeing.. thank you for your patience!

hey Carl, thanks.. I tested on windows XP Real IE8 (ie8 standards) and all it did was translate the image, not scale for the following link: http://duke.innovah.com/dukeregional/test.html i couldnt check the code pen in XP Real IE8 (IE8 standards) .. i will have to check Rodrigo's virtualbox suggestion for code pen examples in real IE8.. since jsbin and jsfiddle also dont allow previews with IE8 (IE standards) I made the code pen (http://codepen.io/jonathan/pen/boclF) into actual files so if you want to test outside of code pen, with some modifications I attached a file that i tested on windows XP, IE8 (IE8 standards) .. and it just translates, and doesnt scale. ... Not sure why.. thanks for the help!! Also Rodrigo.. are you seeing it scale in the Oracle VirtualBox ie8 ??? codepen_scale_ie8_ie8_standards.zip

looks like you removed the wrapping div with css (position:relative;) and the css on the image (position absolute;) .. try adding the wrapped div and the position css back ie8 (ie8 standards).. would not even animate without the window load event handler... also try to wrap your TweenMax call with a window load event so you make sure you run the animation when the image is loaded // wait until the dom is ready $(document).ready(function() { // wait until window is loaded and all assets like images, frames, urls are loaded $(window).load(function(){ var bool = true; $('#campus').click(function(){ var _scale = (bool) ? .7: 1; TweenLite.to($('#campus'), 1, {css: {transformOrigin:"center center", scale:_scale}}); bool = !bool; }); }); // end window load }); // end dom ready i tested this on windows XP, ie8 (ie8 standards mode) .. and on windows 7, ie8 (ie8 standards mode) .. and it animated.. but it just translated the image from right to left top, and didnt scale the image.. if all your doing is scaling an image... as a fallback for only ie8, you can you can just animate the css width property or animate the width attribute of the image in IE8 only.. // wait until the dom is ready $(document).ready(function() { // wait until window is loaded and all assets like images, frames, urls are loaded $(window).load(function(){ var bool = true; $('#campus').click(function(){ // if is3D is true than its not ie8 var is3d = hasTransform3D(); if(is3d){ var _scale = (bool) ? .7: 1; TweenLite.to($('#campus'), 1, {css: {transformOrigin:"center center", scale:_scale}}); } else { var _newWidth = (bool) ? 200 : 300; TweenLite.to($('#campus'), 1, {width:_newWidth}); // TweenLite.to($('#campus'), 1, {css:{width:_newWidth}}); } bool = !bool; }); }); // end window load //////////////////////////////////////////////// // Check for Transform3D support function hasTransform3D() { var div = document.createElement('div'), transforms = { 'Transform':'transform', // default 'WebkitTransform':'-webkit-transform', // chrome and safari 'MozTransform':'-moz-transform', // firefox 'OTransform':'-o-transform', // opera 'MsTransform':'-ms-transform', // ie 'msTransform':'-ms-transform', // ie10 'transform':'transform', // ie10 other build }, has3D; document.body.insertBefore(div, null); for(var t in transforms) { if(div.style[t] !== undefined) { div.style[t] = "translate3d(1px,1px,1px)"; has3D = window.getComputedStyle(div).getPropertyValue(transforms[t]); } } document.body.removeChild(div); var output = (has3D !== undefined && has3D.length > 0 && has3D !== "none"); //if(window.console) console.log(output); return output; } }); // end dom ready basically the function above hasTransform3D() .. checks if translate3d is supported in the browser. IE8 does not support translate3d so the it returns false for IE8. So basically for a non ie8 (ie8 standards) browser, it will use scale, and in ie8 (ie8 standards) browser it will animate the css width property or the width attribute of the image. Other than that im not sure why GSAP wont scale the image in IE8 (IE8 standards) Pretty soon we wont have to worry about IE8 since it is only at 6% market share and dropping quickly. The only users who are forced to use IE8, are users on Windows XP, who wont upgrade. But even then, they can download Firefox or Chrome if they know they can. Microsoft stops support for XP on April 8, 2014. So hopefully by the end of this year, the IE8 market share will be 3% or smaller, and will hopefully fall even faster. And then no more IE8.. and then we can just hope for IE9 to fall to its death as well! i hope this helps!

I presume your using IE10 .. the real IE8 standalone.. the one that is used in Windows XP is Browser Mode: IE8 Document Mode: IE8 standards IE10 "Standards" mode in IE10 is a new rendering mode in IE10.. I also have a Windows XP box with IE8 standalone, and that is same as the IE10 rendering in: IE8 (IE8 standards mode)... i hope that helps

no worries.. i noticed when i was messing with scale in ie8 awhile back, that i had to have the element i was scaling to be absolutely positioned. Glad to help!