Search the Community
Showing results for tags 'matrix'.
Found 13 results
-
Hi! I want to begin by thanking the developers of GSAP for creating this wonderful tool. I have been using it since 2018. My question is pretty straightforward from the title. An example scenario can be found in the CodePen demo. Basically, when I want to rotate a square by 90 degrees around a point (in the demo, it is (300, 200) in SVG coordinate, as indicated by the blue dot), the transformation matrices needed are first a Translation matrix T_{-1} that offsets the object by -300, -200, then a Rotation matrix R that rotates the object by 90, then the inverse of that first Translation matrix T that brings the object back by offseting it with 300, 200. The final aggragated transformation matrix is then the product of (T)(R)(T_{-1}) By inspecting the final transformation matrix that GSAP sets for the square element via the transform attribute, I am pretty sure this is how GSAP handles rotation around an arbirtrary point, instead of setting the transform-origin attribute. I wonder then how I can access each of the individual T, R, and T_{-1} matricies? If there is not a direct function call to get these, can you point to me where in the source were these matricies computed? Thanks!
-
Hello! I am very thankful for Greensock forum to be so helpful for me before with my website. I've got +1 little moment of getting stuck in there without knowing what to do. I need to make on scroll text animation as on this reference website - https://www.joinsparq.com/ (as in "Say goodbye to labor fees" and other titles like this). I am using SplitText and trying to get the same effect, but I cannot achieve the same look of text getting from like... behind & bottom of the row and moving to the front & top? I am attaching a codepen of my current progress and that's how it looks when implemented on website (not quite it, right? ) - https://saltbox-new.webflow.io/workspaces I think the reference website itself might be using GSAP as well, but I don't seem to find it in their code, so will be glad to get any help or hint. Thanks in advance! P.S. An off question - is it possible to upload SplitText/SmoothScroll as CDN links? I am using sitebuilder, so cannot store files externally myself or upload them to the builder as well as pasting it as external code due to a limit of symbols.
-
Hello GreenSock, I'm having a problem which is described here, but wasn't actually solved in terms of why it doesn't get the correct matrix3d values: https://greensock.com/forums/topic/13986-tweening-directly-to-a-specific-matrix3d-transform/ This is what the matrix is set to: matrix3d(0.613582, -0.090278754224, 0, -0.00205016, -0.211713, 0.7803832528079999, 0, -0.00323228, 0, 0, 1, 0, 0, 0, 0, 1) And this is how it's supposed to look: This is what results (using force3d:true): matrix3d(0.613584, -0.0902806, 0, 0, -0.21171, 0.780381, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) Here's a Fiddle (CodePen wasn't working as it didn't want to save for some reason): https://jsfiddle.net/6agx0pL8/ Just like the forum poster I linked to, I was using PerspectiveTransform.js to get to this matrix3d. Am I missing something, or is this actually a bug or missing feature?
-
I would like to know how can I do this kind of 3D movements and interactions on scroll: http://act.mit.edu/cavs https://juliebonnemoy.com/ https://fontface.ninja/ All this examples use a div "scroll-wrapper" as a scroll container with a css: transform: translate3d(0px, -361px, 0px) I always used scrollmagic but now I think its an old solution... recommendation, advice? Thanks!
-
Hi all! I'm having a bit of a weird situation. I'm creating a fake scrollbar with Draggable that moves its target's scrollTop position as the scrollbar moves. I've got this working like a charm, except for one hiccup... IE is returning different values for the scrollbar's transform CSS value than Chrome/Firefox are. For example, Chrome/Firefox are returning something like matrix(1, 0, 0, 1, 0, 5), while IE is returning matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 5, 0, 1). In order to get my scrollbar contraption to work, I need to listen for/get the Y value of the scrollbar's transform property and respectively set the target div's scrollTop position through a formula using that same Y value. This is proving to be a bit tricky as I need to parse and return different positions for IE (position 13) and Chrome/Firefox (position 5). I suppose my question is this: could someone shed some light onto why IE is returning a matrix3d value while Chrome/Firefox are returning just a regular matrix value for the draggable? Right now I'm using some browser sniffing to get it all to work, but I'd really rather not if I don't have to. Please let me know if setting up a Codepen would help better illustrate this situation. Thanks! -
I have a carousel that animates by xPercent when clicking menu buttons. I also use the Draggable with ThrowPlugin on the carousel to swipe left and right on sections of that carousel. The menu tween uses xPercent (which is what I want, since the carousel keeps its place on window resize) But the Draggable tween uses either translate3D or matrix by pixel values and not percentages. By the way, I'm use an array for snap: {x: [pos1, pos2, pos3]} I've been able to figure out the new percentage and remove the translate3d value using 'onThrowComplete', but the Draggable values is not cleared. So my questions are: 1. What is the best practice to integrate a regular tween and a Draggable tween on an element, when xPercent is required on the regular tween? 2. What is the correct way to flush out any values when a Draggable event has completed? Any help would be appreciated. Thanks in advance.
-
Hello, I've set up a demo CodePen below, which was set up with an element (similar to our Design application's element structure) with an already defined rotation matrix on the parent element we are transforming. CodePen URL: http://codepen.io/jbevan2007/pen/RKKVrW We've added various transitions such as slideInLeft, slideInLeftRotate, and others which provide entrance and exit animations to our canvas/scene within a 10-20s window of animation. We set these up similar but customized from Animate.css and the basic animations they use. Our elements are rotated in absolute position, some using transform matrix to merely control rotation. Our positioning is controlled via left/top CSS properties. Our issue: When we apply the transform with left (outside canvas) tweened to 0, (maintaining our original left/top in parent), we lose our rotation matrix. One of my solutions was to apply the matrix and animation to the inner layer, and this works well to keep our rotation as expected. The issue with this solution, is that our starting point is not coming from left direction due to having a transform within another transform. You can see this occur with the second button in the CodePen demo. Is there any way we can achieve this, while maintaining our rotation at completion of animation? Please let me know if you have any questions or if you did not understand my request. Thanks, Justin
- 8 replies
-
- 1
-
-
- rotate
- timelinemax
- (and 1 more)
-
Hi, I was testing and I found a problem on Safari 9.1 1.18.2 - ok: http://codepen.io/lagden/pen/PNyLKR 1.18.3 - fail: http://codepen.io/lagden/pen/reqoZY It is the same code, just change GSAP version. Well, I did a downgrade to solve! Basically, in version 1.18.3, matrix isn't working on Safari.
-
Hello everyone, I am just getting started to use GSAP to animate SVG graphics. I want move a 'leg' and yet the shank separates from the 'leg' in moving. The key codes are: " TweenLite.to(leg, 1, {rotation:"-30",svgOrigin:"155 150"}); TweenLite.to(shank, 1, {rotation:"30",svgOrigin:"155 250"}); " Though I think it is the problem of maintaining the status of matrix of the shank, I do not know how to fix that. Somebody can help? Thanks.
-
Hello Everyone, I put together a codepen example showing 3 boxes rotating in the Y axis. Green box uses rotationY Red box uses transform: rotateY() Blue box uses transform: rotate3d() Example: http://codepen.io/jonathan/pen/Kgmtn If you look at the red box, and inspect that elements code, you will see how the red box is using matrix3d() instead of the simple transform rotateY() Is there something im missing to why matrix3d() is being used? Is there a way to force GSAP to use the simple transform rotateY() transform function instead of matrix / matrix3d? Thanks again for any help?
-
I have done a lot of work in ActionScript over the years developing interactive maps for use online and in kiosks. I'm making the jump into JavaScript, and I'm looking at the various tools available. I make extensive use of the MatrixTransformer class in my ActionScript work to facilitate precise zooming and panning in my maps. Is there currently a good solution in GSAP for JavaScript for accomplishing these tasks? If not, is there any plan for including a MatrixTransformer analog in GSAP for JavaScript? Thank you.
-
I'm scaleing a huge div with absolutely positioned content inside. The problem is, that Matrix transforms seem to work on every browser (FireFox, Chrome, Safari, Opera, IE7, IE9), but not on IE8. I looked at the source code, and it was generating this code for the filter on IE8: filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.4091666666666667, M12=0, M21=0, M22=0.4091666666666667, Dx=0, Dy=0) ; I remember reading, that IE8 filters must be prefixed with the -ms- prefix. Maybe that is the case, transforms seem not to be working.
-
I know I am missing something here, can I have an onComplete call in a Trasform Matrix tween? Here is what I have import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.TransformMatrixPlugin; TweenPlugin.activate([TransformMatrixPlugin]); TweenMax.to(mc, 2, {transformMatrix:{rotation:-15, ease:Quad.easeInOut, onComplete:myFunction}}); The tween works nicely but just dead ends on the end never calling myFunction
