Jump to content
GreenSock

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


Forums

  • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

  1. Hi everybody, I used to work with Greensock API inside Flash (swf), Edge Animate, and, now, in Hype Pro since Edge has been abandonned by Adobe this year. I try to extend Hype features with a GSAP Tweenmax API. But, I cannot obtain 3D real perspective with imbricated symbols. I could get this inside Edge. Why is there a problem with Hype Pro ? I send you the Hype pro file to check it. Thanks for your help. I wrote this code : CSSPlugin.defaultTransformPerspective=700; var wall = document.getElementById("wall"); TweenMax.set(wall,{rotationY:45, transformPerspective:200, transformStyle:"preserve-3d", force3D:true}); TweenMax.to(wall,4,{rotationX:180}); TweenMax.to(".square",4,{rotationY:720}); imbrication3D.hype.zip
  2. Hi there, GSAPJS does a great job to bring AS posibilities to JS. However there is one thing that seems to be missing - and i might probably be out of scope but i'll go ahead and ask: Is there a convenient way in GSAPJS to easily get values back from the transform property - scaleX, scaleY, RotationX, skewX etc... ? Or do we need to work with the 2D and 3D matrix? Right now I'm using $("selector").data(key, value) to store (set/get) these variable but I was hoping to find a better way of accessing these values in real time. Anyways, here is an example that works fine using $().data() : http://jsfiddle.net/Dqg2n/3/ Thanks for your work, you make coding so conveninent!!
  3. Please, could You explain me why the rotationX params doesn't fit like rotationY & rotationZ in my 3D cube test?
  4. Hello, how do i change an effect when scrolling to next slide? I was trying to find some effect options in this codepen - http://codepen.io/bassta/pen/kDvmC but I didnt succeed. For example something similiar to this - http://www.bistroagency.cz/ They use some transitions between each slide, It kinda looks 3d. Thank you!
  5. Having trouble understanding 3D transformations. I took a look at this page: https://greensock.com/css3/, but while they provide great demos, the code isn't shown so I can analyze and learn from it. In my pen demo ( ), I'm struggling to understand why my transforms do not animate smoothly to a 90 degree rotationY. When the animation starts it jumps and then animates the rest of the way...of course not the intended effect. Any assistance is appreciated. UPDATE: Ok, so I figured out I guess the parent container needed a perspective set. Now they animate smoothly, but at 90 degrees I'd expect them to disappear and I can still see them on an angle?
  6. I'm trying to make a simple cube made from 6 divs for the faces and a div to contain it. Seems to work ok at first, but when I apply a tween to the container div it flattens the contents rather than applying transforms to the faces individually. It's hard to explain but you can see what's going on in the codepen here: http://codepen.io/insomniagfx/pen/PqWPRZ/ Is this approach viable, or do I need to rotate all six sides independently to get the effect I'm going for?
  7. Since that draggable could be used to drag and rotate one element in 2d platform, I'm wondering that is it possible to control the element to rotate in 3d? I've found that there's a codepen http://codepen.io/MAW/pen/doPLME showing how to make one element both draggable and rotatable in 2d, but I can't find any way to expend this method to 3d rotation. I know that I can setup two sliders to control X rotation angle and Y rotation angle, but what I want most is some sort of "control point" to make the 3d rotation happen. Could you please give me some advices? Thanks!
  8. Hi everyone! Pretty simple question here, is there any way to tween a transform-rotate more then 360º. For anyone not super familiar with 3d transforms: Simply put, the limitations of matrix3d means you cant rotate more then 360º by passing values more then 1 or less then -1. Because of this you need to loop from states -1 to 1 if you wish to rotate multiple times. Is there any built in functionality for this? or is there an easy way to loop through the transform rotation? Thanks, Daniel Example of the 360º transforms I have been using: var tiltX = function(x){ return "matrix3d(1,0,0,0" + ",0,"+ Math.cos(x) +","+ -Math.sin(x) + ",0" + ",0," + Math.sin(x) +","+ Math.cos(x) +",0," + "0,0,0,1)"; }; TweenLite.fromTo($(".subdiv"),2, {css:{transform: tiltX(3.1415)}} , {css:{transform: tiltX(-3.14159)}} ); OR TweenLite.fromTo($(".subdiv"),2, {css:{transform:"rotateX(-179.99deg)"}} , {css:{transform:"rotateX(180deg)"}});
  9. Hi, Have very strange behaviour that is not working only in Google Chrome but works in Firefox. I need to make it work in Chrome, can you help me with a hint? I have a cube with only side pages (without top and bottom) - so I have 4 pages and I rotate them for 90 degrees left and right. Here is the the LIVE example (everything is in a page - libraries are taken from CDN, CSS is inline, no images): http://www.cloomo.com/problem How to simulate the error: Start Google Chrome and go to http://www.cloomo.com/problem Go to the Page 3 (it has green background) and you will see that links "Back 2" and "Page 4" are not working and their text can not even beselected with a mouse. You can come to Page 3 by clicking on "Page 2" > "Page 3" or "Left" > "Left" Can you help me to make these links clickable? Is there an error in CSS styles or in GreeSock library? I can not find it. Another question: Is it possible to make it more smooth? Thanks Alex
  10. https://dl.dropboxusercontent.com/u/34687130/work/kynan/tiles/index.html On Safari (or iOS Safari) notice how one tile is over the top of another when it shouldn't be. When I disable perspective, this issue does not occur. I have tried changing the zindex at the correct place, as well as the Z 3D property. Nothing seems to work. Is this a known issue? Thanks.
  11. I cant for the life of me get a simple 3d rotation working in iOS Safari right now. It works from the Codepen for me, but not with all the same code in a simple html file (attached). This tells me I am probably doing something dumb. But basically it works correctly from desktop, but from my phone the rotated div disappears as it rotates. Please help. http://codepen.io/anon/pen/raYMwR index.html
  12. Newbie here. When using transformPerspective + fromTo and setting alpha:0 to alpha:1 tween never happens. But if alpha value is never set or alpha is 1 to 1 everything works just fine . This is only in FF.
  13. Hello, I'm trying to create an effect that several boxes that overlap are rotated and then each one expands from the other in a 3D way. The only way I found that does that is by modifying the transformOrigin property. But unfortunately that property does not animate and simply goes into position. Is there a better way to achieve this? (the codepen sample should illustrate the animation that I'm describing) Thanks. Here's the codepen again: http://codepen.io/netgfx/pen/EaKPdP
  14. Hello there, As a beginner I'm i went into an issue early and I'm still unable to solve it. Maybe can you help me with it. I'm trying to achieve a card flip effect with my navigation bar, here's a small example of what I try to achieve but I'm unable to make this working. It seems to be a z-index related issue. I really hope you can help me achieving this effect. Kind regards. EDIT /// I tried at one point to achieve this effect with 2 menu div with all my buttons one over the second and it was working fine, but I needed to animate both object directly at the same time, which caused a lot of complicated handling of the animation.
  15. Can't i use translate3d in my tweens? I see x and y for translate, but no translate3d!
  16. I have found some code on SnorkleTV that performed a 3D Flip of a page, and I was trying to use it. But in my use of it the object is being rotated from the left margin, but what I need is for it to be rotated by the x axis center of the object. The following is the code that I am using for the first step in the Flip. var flipSpeed:Number = 0.5; var tl:TimelineMax = new TimelineMax({paused:true}); tl.append(TweenMax.to(currentView, flipSpeed, {rotationY:90, visible:false, ease:Linear.easeNone})) The example given on SnorkleTV was extraordinary. I hope to get it right. Gary
  17. Hi guys, At the moment I'm working on a rotator that rotates between 3 tabs with a 3D perspective (middle tab in the front and 2 on the sides that are in the back). It's all working fine on the platforms and browsers I've tried except for Chrome (both Windows and Mac). The problem there is that one of the side tabs is not rendering on the Z axis while if you inspect it in dev tools the overlay shows the tab in the right position. Here is how it is supposed to look: http://puu.sh/bAamR/98bab7014e.png Here is how it actually looks: http://puu.sh/bAaod/da2a27ac77.png And here is a working demo file I've put online: http://lwigchert.nl/test/demo_issue.html It might be an issue with the z-index because when you play around with that the tabs seem to switch. If there is anything else needed that may help, let me know!
  18. Has anyone done any work with Greensock 3D transforms to create dynamic perspective shadows with CSS3? I was thinking this morning that it would most likely not be that difficult, but my 3D math/trigonometry skills are somewhat dormant. What I mean is shadows that will fall on a flat horizontal plane ("the ground") behind the object, as at sunset, and will, as the object moves in x and z directions (not y, as that seems complicated). The shadows would respond to a central light point (perhaps the center of the screen) Something like this image — Thanks for any way forward —
  19. Hi, I’ve spent the last day building a working rubix cube demo using TweenMax to position and animate the objects accordingly. Draggable is being used to rotate the cube X/Y and throwProps is used too. Firefox is displaying some very odd, back-face type display issues that I can't seem to resolve, can anybody suggest a work-around or fix to correct this problem? IE10 is simply flattening the whole object onto a 2D plane and not allowing any z-depth. The demo will auto rotate 20 times before allowing user interaction by "swiping" a side to rotate it, or dragging the background to rotate in the cube in 3D space. Any help would be gratefully appreciated. View the demo here: http://www.rogueinteractive.net/rogueiOS/rubix.html Pete
  20. 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
  21. 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
  22. 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.
  23. 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
  24. 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.
  25. 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
×