Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags '3d'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. 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!
  2. 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
  3. 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?
  4. 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.
  5. 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.
  6. 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
  7. 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.
  8. 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?
  9. 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?
  10. 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
  11. 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