Search the Community
Showing results for tags '3d'.
Found 67 results
-
I am attempting to create more 'depth' in a 3d transform to match a CSS transform I currently use. The current greensock transform renders more as a flat card flip than a cube rotate. I have set up a CodePen sample of both the CSS transform and corresponding GreenSock transform side by side. I'm looking to make the greensock version have the same depth as the css version. I'm thinking I need to get some 'skew' properties involved but I am getting no where. Any ideas? Thanks in advance.. (note: I've only have this pen set up for FF to simplify the code) http://codepen.io/stevenmross/pen/jkwHq
-
I'm using the greensock animation library to animate the translateZ property of an image. This is my code: $("<img />") .attr({ src: piece, class: "pieces" }) .hover(function() { tl.to($(this), 1, {transform:"translateZ(1px)"})}, function() { tl.fromTo($(this), 1, {transform: "translateZ(0px)"}) }) .load(function () { _stageElement.append($(this)); }) } But instead of stopping at 5px it flies completely off the screen. Does anyone know what's happening here and why? Also if it's important after the image flies off the screen, it comes back to its original location, but the hover property doesn't have any effect anymore. I'm not sure if this is a greensock issue or a jquery issue. Here's an example to see what I mean http://richbaird.net/3dFlip/fip.html
-
Hi, I love GSAP. That gives incredible features in Edge Animate, Adobe DPS and Aquafadas ! Thanks for all. But, I'm trying to build a 3D model using some combined symbols inside Edge Animate (like a menu including some pictures wiches are all in a 3D orientation with rotationY). Then, each picture tween I can write works lonely, and the global menu too. But when I try to animate the pictures while I am moving in 3D the menu, pictures are staying in 2D. And the 3D animation of the pictures looks 2D, staying thin, flat, as if I could only tween one object in one 3D space at the same time. How should I do, to organise my symbols as a real 3D composition and build something like a coverflow ? Thanks.
-
Hey guys, I'm pretty sure I've stumbled on a bug here. I'm building a cube-gallery with TweenLite. The cube itself is transformed as are the 6 faces. (2 in this case, because i simplified it). Here's my JS example: // Setup props for cube and sides TweenMax.set("#cube", { z: -100, transformOrigin: "center" }); // Use GSAP to set values (Matrix) // TweenMax.set(document.querySelector(".top"), { rotationX: 90, z: 100 }); // TweenMax.set(document.querySelector(".front"), { z: 100 }); // Set values normally (rotateX, translateZ) document.querySelector(".top").style.webkitTransform = "rotateX(90deg) translateZ(100px)"; document.querySelector(".front").style.webkitTransform = "translateZ(100px)"; TweenMax.to("#cube", 1.5, { rotationX: -90, yoyo: true, repeat: -1, ease: Power3.easeInOut }); Now, using rotateX and translateZ it works just fine (In webkit, I didn't write out the other prefixes), but if I switch to the GSAP version it breaks. I'm guessing this has to do with the Matrix that is being applied instead of translateX/translateZ. Is there a way to force GSAP to not use the matrix? I think that would fix it for now, and i'd much prefer using the GSAP syntax. I can't use CSS to transform the elements as they switch position when the "slider" updates. For instance, if there are only 2 slides it should move them around seamlessly to give the impression of a cube with 6 faces. I put together a Codepen with a working example and the CSS I use: http://codepen.io/Ahrengot/pen/kvaqA
-
Hello, I was wondering if it's possible to 3D-Rotate KineticJS objects (shapes). With Tweenmax. If you happen to have some examples please let me know. Thanks.
-
Hi good people of the forum. I'm trying to animate an opening gift box with the lid popping of and the sides folding down. I was able to do a draft concept using shape tweens in Flash itself after struggling like hell trying to do it with TweenMax. (attached is the swf) I'm fairly familiar with TweenMax / TimelineMax. Something like TweenMax.to(mc, 2, {rotationY:90}) is easy but I quickly run into issues as far as the anchoring points go especially when it comes to the skewed sides. Anybody got some great ideas to get me going? Cheers gift box.zip
-
Hello, I was wondering how could we translate CSS 3D animations & transformations to equivalent GSAP code. I have the following CSS: @-webkit-keyframes pathRotate { from { -webkit-transform: rotateZ(0deg);} to { -webkit-transform: rotateZ(360deg); } } And want to translate this into GSAP code. I have also set up a codepen here: http://codepen.io/netgfx/pen/pBgbo What I'm trying to do is rotate in an "orbital" path some objects but without them rotating around themselves. Is there a plugin for GSAP or some specific code that can do that? Thanks in advance!
-
Hello, I'm working on my new Portfolio at the moment, and i ran into a problem. The whole page will be based on a cube that spins around. At first I used CSS-Transitions for the animations, but I decided to switch to GSAP JS. It worked great but I got a "little" problem. It rotates the cude diffrently then it did before. This it what it does: http://vps.deesr.com/cube/ This it what it should do: http://vps.deesr.com/cube/cssversion/ *You can rotate the cube with the arrow keys | (WEBKIT only for now)* JS I use to rotate: //GSAP Version TweenLite.to(cube, 1, {rotationY: yAngle,rotationX: xAngle, ease:Quad.easeInOut}); //CSS Version document.getElementById('cube').style.webkitTransform = "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)"; Because of this "Bug" (its more like Property) the transparents get messed up in the GSAP version. It seems like the GSAP Version rotates the Axis NOT the cube itself. I hope someone is able to help me. Thanks - Deesr
-
Hey TweenMaxers, Was futzin around and prototyped up a 3d carousel (http://codepen.io/johnblazek/full/nceyw, also using on my personal site) that works well in Webkit, followed by Safari and maybe IE10 (it doesn't work on my VM) Noticed a couple things happening when I tried to animate on the Z axis. 1. In lines 60-64 in the JS, I'm defaulting to use the vendor prefixes in order to get translateZ to show true perspective. Tried using this code: TweenMax.set($item, { rotationY: rY * i, z:radius }), but throws some weird positions when used. 2. The other weird thing is if you reference line 103 and 104, you'll notice I broke them up into 2 calls, one, a "to," and the other a "set" because when I tried combining them and animate the z axis along with rotation X and Y, once you go past rotation Y -90 degrees and 90 degrees, it spazzes out. Any ideas?
-
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.
-
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.
-
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
