iconofsyn

Thanks i have not looked at the tutorials yet but im guessing its little more than creating a css 3d space, creating a container in that space which rotates in response to mouse move and placing "layers" on the container and setting their z position at different places or each one. the images go on the layers

looking at the code for this page http://systemshock.com/ it seams that greensock is used to create the moving face animation, looking at the code and the number of image it seams it creates some sort of parallax scrolliong effect does greensock have a module which will do this for you or does it have to be made manually?

I have an interactive web app in which an object can have multiple "states" and there are buttons to switch state greensock is being used to animate the change from the current state to the selected state. any of the states can be directly accessed while the object is in any state. The .to() method is fine for this. However it is possible that a user will select a different state while an animation to change the state is in progress. i have 3 qustions if i use the .kill() command to stop an animation in progress will this halt or reverse the existing animation? if it halts it will the next animation start from the position it reached when the .kill() command was called? if in my code i call the kill() command an immidiatly start a new tween will there be any noticeable pause in the animation?

I tried that immediateRender option and it did not work The problem is that my CSS code contains this style And after the .from() commands have run the object has this CSS style attatched to it Chrome DEV tools shows that the first style is not applied Theifore i cannot change the X Y and Z values (from chrome dev tools or JS) and observe a animation If i disable the second style (the one which .from() adds) using chrome dev tools then changeing the X Y Z values in the second style does produce an animation. This proves that the problem is caused by the final style which the .from() function applies during its animation still remaining on the element after the animation has finished. Is there any way to make greensock remove this or will i have to do it myself (say using jQuery)

if i do that And i have the objects final position declared in my CSS sheet will it continue to display in its final position after the tween ends

I want to have multiple animations in a tweenmax.from() command. This is for an intro animation. I have used CSS to place objects in their permanent position and am trying to use tweenmax.from() to make them animate from outside of the screen into their proper positions. I cannot simply have multiple tweenmax.from() commands because if i do this then the objects animated by the second or later tweenmax.from() start by appearing in their final position and when their animation starts they jump to their animation start position and then animate back to where they should be. Also i need to have different easing on each command my current code looks like this ----------------------------------------------------------- introTimeLine.add( TweenMax.from($('#cube'),1.5,{ ease: Bounce.easeOut, top:-10000,transform:"rotatateX(90)"} ) ); introTimeLine.add( TweenMax.to($('#cube'),0.5,{ ease: CustomEase.create("custom", "M0,0 C0.126,0.382 0.658,0.852 0.816,1 1.008,1.18 0.818,1 1,1"), transform:"translateZ(100px)"} ) ); -------------------------------------------------------------- is there any way i can move the two animations into the saem from command AND have a different speed and ease on each one and delay the second on until the first one has completed. NOTE IN my code the second animation is a .To() command, currently i am using this as a work around and it requires me to set the objects translateZ in my CSS style as the point where it should be at the start of the animation. I do not want to do this because this relies on greensock to add its perminant CSS rule and this is interfering with things i wish to do after the intro animation completes to summarise my questions are Can i have multiple animations in the same .from() command which each have their own speed and easing type, and can i delay the start of the second one until the first ends.

Yes i know that rotating the cube element would rotate the inner divs with the cube but it i placed another 3D space inside on e the the cube faces would this rotate with the cube element whne it is rotated will it rotate on its own (with all of its child objects) when it is rotated

I want to embed a transform-style: preserve-3d; 3D object inside another transform-style: preserve-3d; 3D object currently i have the following HTML <div id="cube"> <figure class="front">1</figure> <figure class="back">2</figure> <figure class="right">3</figure> <figure class="left">4</figure> <figure class="top">5</figure> <figure class="bottom">6</figure> </div> each figure element is a face on the cube. the id="cube" element has the transform-style: preserve-3d property. If i place another transform-style: preserve-3d container inside one of the figure elements 1) will it still rotate with the cube in the same way any normal element on one of the cube faces would? 2) will it be possible to animate it in 3D in the same way i can animate the cube.

I am creating a demo which will display every possible CSS graphical/animation effect The demo will consist of a cube which the user can rotate and each face of the cube will have various CSS graphical/effects mostly animated playing in a infinite loop. Bellow is a list of effects which i know about, can anyone think of any more Background Gradients Clipping and Masking Border Radius webkit-reflect (is this one available outside of web-kit yet) Filters -blur(px) -brightness(%) -contrast(%) -drop-shadow(h-shadow v-shadow blur spread color) -grayscale(%) -hue-rotate(deg) -invert(%) -opacity(%) -saturate(%) -sepia(%) Transform -Translate(X,Y,Z) -Scale(X,Y,Z) -Rotate(X,Y,Z) -Skew(X,Y)

It was difficult because the items needed to be animated in one order but the bezzier supplied needed to go through them in the opposite order (because the delay got shorter each time effectivly causing the first item animated to appear to move last) in the end i simply made a reverse version of the array. since only the index is needed in the reverse version (not the object itself) i could make it more efficient by not copying the normal array at all. instead i could make an empty array of the same length and reverse that

It is a well known hack that an animation can be made to run on a GPU by applying at least one CSS 3D transform property so with 2D only transforms often a single 3D transfom which does not actually do anything is added to force GPU rendering. when using greensock animations such as x:200, transformOrigin:"50 50" is the use of GPU rendering applied automatically? if not how can it be done and does it have to be done seperatly for all tweens?

in this thread x: and y: are used in place of translateX and translateY does the x: y: syntax use CSS transforms underneath rather than top and left?

I have implemented your sameple custom.ease code before my code was for(;i>=0; i--){ tweenStartTime = tweenStartTime + 0.002; squezeTimeLine.add( TweenLite.to(b[i], this.settings.firstStageSpeed, {scaleX:0.05, transformOrigin:"50 50"}),tweenStartTime); } now my code is for(;i>=0; i--){ squezeTimeLine.add( TweenLite.to(b[i], this.settings.firstStageSpeed, {scaleX:0.05, transformOrigin:"50 50"}), this.curve.getRatio(i/b.length) * 0.4); } This gives an effect similat to what i want BUT The objects now appear to get animated in the wrong order, im guessing this is down to the start-delay increasing as you go up the list of objects. How can I "invert" it back so that things animate in the right order which still keeping the easing effect I apologize that my maths is not very good

I have been studying your demo, comparing it with the greensock documentation and attempting to understand it the line delay:function(index) is confusing, the index variable does not get mentioned before this so where does it come from? is it automatically available because it is inside a tween? and is it the index of the current object being animated?

would i be correct to believe that 1) you are creating a custom ease object. 2) you are using this in place of the "value" field in X:value 3) I could do the same in my staggerTo by placing the ease object in place of the stagger time