Search the Community
Showing results for tags '3d'.
Found 58 results
-
Hello! I'm building up my new Portfolio with your Engine but I have a big problem. It's basically a spinning 3D Cube. I made a a Timeline for each "Spin" and i just Start and Reverse those Timelines. But sometimes when i press the reverse button everything gets messed up. (Attechment). The Timeline im reversing should animate 2 divs. but only one div works correctly. You can try it out yourself at http://deesr.com/ . Just go to the second page, open a few "Colors" and then go back to first page. In some cases it works, but sometimes it doesn't, what makes it even harder to fix.
-
I didn't have much luck with my last post, and can't delete or change the topic. Here's something I'm having some trouble figuring out — and perhaps it's a start to solve my other questions: how would I tween an object in 3d space along another object in 3D space? The second object is rotated along its x-axis. I'm trying to understand how to get the dimensions of objects placed and rotated in z-space -- what their boundaries are, and where other objects are in relation to them. So, in the attached graphic, I'd like to pin a green square to a blue bar and move it up and down. How do I know where it is in relation to points along the rotated object's body? How do I know the distance to tween? In pseudocode: greenBox.x = blueBar.x; greenBox.y = blueBar.y; TweenMax.to(greenBox,1,{y:blueBar.y + blueBar.height, z:"some distance that is appropriate to the height I've tweened"}); This doesn't work. I am almost certainly approaching this wrong, but after some time spent poring through matrix3D's and perspectivePositions and the like, I feel I am simply missing some very obvious point — thanks for any help.
-
Tweening objects in 3D space: how to determine "where things are"
cerulean posted a topic in GSAP (Flash)
I'm having some trouble grokking the relationship between an object's x and y position, and its 3D rotation and its z position. This is related to my earlier post (which Carl helpfully helped with) regarding moving an object within a random quadrangle. Here the object (it will be many) is moving back and forth between two lines projected in 3D space (so they are converging). I'd like to modify the code so that the object(s) at arbitrary positive z positions remain within the boundaries of an arbitrary quadrangle projected into 3D space. I've read a fair amount — and gotten some useful results with getRelativeMatrix3D() in terms of positioning things in 3D space, but I'm not sure how to apply this to above. Or should I use local3DToGlobal()? That seems somewhat inelegant (but perhaps not). But how does this apply to different points on a single object rotated in 3D space? As a bonus question (and thanks for any help) -- what else are the essentials to know in Flash 3D? Camera? Vanishing point? Thanks
-
Hi, I just encountered a bug in Chrome (possibly other browsers too) leaving 1px trash during 3d animations, like n the attachment. All you need to do is add 1px border, or box-shadow to the animated element. If you don't want it to be seen - in color of background, or transparent: border: 1px solid rgba(0,0,0,0); border: 1px solid transparent; I hope it'll help someone. John.
-
Collision with pure css transition (scale persists). with -vendor-transforms
Benew posted a topic in GSAP
Hi! I'm having a problem with a webpage. It contains 6 elements that are animated via css for :hover behaviours: .mySel{ -xx-transform: scale(0.8); } .mySel:hover{ -xx-transform: scale(1); } On intro, I need to tween these elements' y position individually, so I use TweenLite: TweenLite.to(this,1,{css:{y:50}}); Problem is, when my tween finishes, the tweened elements have inline styles overriding my :hover behaviour: -webkit-transform: matrix(0.8, 0, 0, 0.8, 0, 0); I see why jack did this but I'm open to manually resetting inline styles onComplete, but I have no way of using TweenLite to do so. I'll have to deal with vendor prefixes manually. I was wishing for TweenLite.to(this,0,{css:{scale:"" or scale:"none" or scale:"auto"}}) to reset the property but no dice... Can someone help me in any way? -
I saw the post. "http://www.snorkl.tv/2011/08/loading-images-with-loadermax-load-and-track-the-progress-of-multiple-images/#more-1215" you are loading images into xml using AS3.0When using this method, the lighter capacity dramatically thinksAnd I looked at this post and wonderedLoaded behind a piece of an image Each image can be rotated by dividing the image into halves, how is it possible?
-
Hi, I'm trying to apply a motion blur to a 3d Tween (using z axis) but it removed the MovieClip from the stage This works fine: TweenMax.from(sq1, 3, { x:400 ,y:300, motionBlur:true} ); This, however does not: TweenMax.from(sq1, 3, { z: "300", x:400 ,y:300, motionBlur:true} ); Any suggestions? thanks
-
Hey Jack, I'm trying to improve on the current method of applying animating values to Webkit's 3D transforms ( this is my current jQuery implementation http://chrisgannon.w...-and-greensock/ ). The new method I'm trying is as follows (and allows the tween to be used in TimelineMax etc). var myObject = {value:100}; TweenMax.to(myObject, 3, {value:400, onUpdate:applyValue, onUpdateParams:[myObject.value]}); function applyValue (val){ console.log(val); //always passes 100 }; I may be missing something here but I would expect the 'val' parameter to be updated onUpdate but it seems to only pass the initial value that was set. i.e. 100. The following obviously works but it's no longer a generic function available to any element. var myObject = {value:100}; TweenMax.to(myObject, 3, {value:400, onUpdate:applyValue, onUpdateParams:[myObject.value]}); function applyValue (val){ console.log(myObject.value); //animates from 100 to 400 }; Is there a way to access/pass the animating value? I should also point out that I am also placing the tweens in a TimelineMax so that may be the issue. Cheers, Chris
