Jump to content
GreenSock

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

Search the Community

Showing results for tags 'matrix'.

  • 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
  • Supercharge

Categories

  • FAQ

Categories

  • Examples
  • Showcase

Categories

  • Products
  • Plugins

Categories

  • Learning Center
  • Blog

Categories

  • ScrollTrigger Demos

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 11 results

  1. 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?
  2. 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!
  3. 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!
  4. 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.
  5. 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
  6. Lagden

    Bug Safari 9.1

    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.
  7. 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.
  8. 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?
  9. 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.
  10. 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.
  11. 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
×