Jump to content
Search Community

iconofsyn

Members
  • Posts

    23
  • Joined

  • Last visited

Everything posted by iconofsyn

  1. 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
  2. iconofsyn

    parralax effect

    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?
  3. 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?
  4. 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)
  5. 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
  6. 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.
  7. 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
  8. 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.
  9. 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)
  10. iconofsyn

    staggering

    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
  11. iconofsyn

    Run on GPU

    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?
  12. iconofsyn

    translate

    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?
  13. iconofsyn

    staggering

    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
  14. iconofsyn

    staggering

    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?
  15. iconofsyn

    staggering

    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
  16. iconofsyn

    bezier plotter

    My project currently used the following code var b = $(containerDiv).children(); //JQUERY i = b.length - 1; tweenStartTime = 0; for(;i>=0; i--){ tweenStartTime = tweenStartTime + 0.002; HorizontalMoveTimeLine.add( TweenLite.to(b[i], this.settings.firstStageSpeed, {left:200, transformOrigin:"50 50"}),tweenStartTime ); } This takes an unknown number of target objects (expected range is in the low-mid hundreds but there could be thousands) and animates each one in the same way with each starting 0.002 seconds after the previous. If this was drawn on a graph it could be represented with a straight line. However i want to stagger the times in such a way that if they were plotted on a graph they would draw an S shape. Does greensock have any functions which can be used to generate a array full of these start times if the total number of objects, the length of the animation and a defined bezzier is known? if not how can this be done? can greensocks bezzier functionality be used for this or modified in such a way that it can be used for this?
  17. here is a simple codepen demo In this i have used 3 embedded time lines. Each embedded timeline tween's ONE object, however in my real code each embedded timeline will tween hundreds of objects. In my real code each embedded time line could have a different length each time it is used because the objects to be animated are dynamically generated. embed_tl_one needs to start at the begging, so no problems here. embed_tl_two needs to start at some point during embed_tl_one playback, since embed_tl_one has a fixed start point the .duration() method could be called on embed_tl_one and combined with a multipler between 0-1 to start embed_tl_two at some point after embed_tl_one has started . embed_tl_there is different, this needs to start at some point during embed_tl_two playback. Also, because my animation is complex i need to experiment with the embedded time lines start time and know that all later ones will shift their start time accordingly so i do need to be able to set start times which are relative to the start or end of other timelines. incase you cant see the codepen demo here is the JS code var tl = new TimelineLite(); var embed_tl_one = new TimelineLite(); var embed_tl_two = new TimelineLite(); var embed_tl_three = new TimelineLite(); tl.add(embed_tl_one); tl.add(embed_tl_two); tl.add(embed_tl_three); embed_tl_one.to(".red", 1, {x:500}) embed_tl_two.to(".blue", 1, {x:500}); embed_tl_three.to(".green", 1, {x:1000});
  18. I dont think that covers what i want suppose i have a time line with 3 sub time lines i want the 3rd sub timeline to start relative to the start or finish for sub timeline 2 how can this be done
  19. I am making a animation which has some complex timing regarding the animation of many elements. all of the elements need to be animated in the same way but the complexity comes from the start times so i have created a master time line and placed embedded timelines inside it. each embedded timeline has has a tween for each element, the tween is always the same but the start time differs for each. for(;i>=0; i--){ startTime = startTime + 0.002; HorizontalMoveTimeLine.add( TweenLite.to(b[i], this.settings.firstStageSpeed, {left:200, transformOrigin:"50 50"}),startTime ); } i need to be able to control the start point of each embedded timeline. so far i have managed to get each one to start at a fixed time. with this type ofcode masterTimeLine.add(HorizontalMoveTimeLine,0.5); Is there any way i can set a new embedded timeline to start at a time relative to annother embedded timeline? i know that if i dont set a start time then it will default to the end of the last embedded timeline to end - and thats it. is there a % based way of doing it (ie start when a specific timeline reaches 70%)
  20. iconofsyn

    staggering

    Use of the stagger timeline functions can be compared to a straight line on a graph because the amount of time between each stagger is always the same. Is it possible so have a stagger which if represented on a graph would be a curve, and is automatically calculated based on some control point values similar to how bezier works? if not is it possible to put a lot of objects on a timeline and automatically calculate their start time based on some control point values similar to how bezier works? if not is there any way to automatically define start times for a list of animated objects in any way other than writing my own function (or using a bezier calculator) to calculate the list start times and passing these values into the line line objects start property (say by using a loop)
  21. The documentation for things like the tweenlight/max constructors and methods such as from(), to() ect all say they can accept an object or array of objects as their target property. I have 2 questions both regarding passing an array of objects 1) If a Jquery selector is used and it matches multiple objects (ie $('.className')) is this valid input for greensock? (the green sock code for this may look something like this) TweenMax.to($('LI'),2,{opacity:0.5}); 2) If not using jquery what format does the array need to take, would the following code be valid var objects = []; objects.push(document.getElementById('someDiv')); objects.push(document.getElementById('someOtherDiv')); objects.push(document.getElementById('someThirdDiv')); TweenMax.to(objects,2,{opacity:0.5});
×
×
  • Create New...