Search the Community

Showing results for tags 'transform'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







Found 78 results

  1. Fakebook

    Performance and Visual Optimizations

    I'm getting towards the end of a project, and started wondering about performance and improving the overall quality of the animations I'm making. In the example pen, I have a few questions. 1. Does using x, y improve the animations over using top, bottom, left, right? In a video by Paul Irish it looks like using translate for CSS animations is performs better, especially in more complicated examples, is this similar with GSAP? Looking at the GSAP tests, this seems different, though. I'm not sure if my eyes deceive me, but I do see a bit of a "staircase" effect on the letters. 2. How would you use x and y translates with staggerFrom + letters wrapped in spans? I'm not sure I understand using x and y properly - when I add to the spans of the letters in the example, it doesn't work. 3. Will lowering the ticker's call time help with performance? While Tweens may not be as smooth, will the browser use less resources if set to something like: TweenLite.ticker.fps(30);
  2. myradon

    Greensock transformOrigin mystery

    Hey guys I've got a question concerning transformOrigin behaviour and why there is a difference in end-location of a group in SVG; Why does this; tlBalloon1.addLabel("start", 0); tlBalloon1.fromTo(balloon1, 0.35,{ css: {y: 0, opacity: 0, scale: 0.25}}, { css: {y: "-=10", opacity: 1, scale: 1, transformOrigin:"right bottom"}, ease:Back.easeOut.config(3)}, "start"); tlBalloon1.fromTo(balloon1, 0.35,{ css: {rotation: "-=20"}}, { css: {rotation: 0, transformOrigin: "right bottom"}, ease:Back.easeOut.config(3)}, "start"); Pen A have a different outcome then this; tlBalloon1.addLabel("start", 0); tlBalloon1.fromTo(balloon1, 0.35,{ css: {y: 0, rotation: "-=20", opacity: 0, scale: 0.25, transformOrigin:"right bottom"}}, { css: {y: "-=10",rotation: 0, opacity: 1, scale: 1}, ease:Back.easeOut.config(3)}, "start"); Pen B OKAY guys I found out myself. It appears when I start with offsetting attributes and I would like to transform to original I have to set transformOrigin in altered from-section.
  3. beamish

    exclude child elements from transform

    Hi, Is it possible to exclude child elements from being affected by a transform? specifically in the linked codepen: is it possible that the div containing the 'X' will not be moved even thought it's parent is being moved? Thanks ! Elior
  4. jnhltmn

    Centered Circular Draggable input

    I have a circular input with a width and height of 80vw/vh (depending on portrait or landscape).. GSAP Draggable uses the translate3d for the draggable component, but when I resize my window it doesn't center my #controller element anymore because of that.
  5. catico

    transform in vh units

    Hi all, I would like to transform an element using vh units rather than %, however when I use them the transformation produced is not correct. When I use, 1, {y: '100%'}) the style applied to element is correct style="transform: translate(0%, 100%) matrix(1, 0, 0, 1, 0, 0);" but when I'm trying to use, 1, {y: '100vh'}) the style applied to element is style="transform: matrix(1, 0, 0, 1, 0, 100);" Thanks for any advice!
  6. I'm trying to test out a scroll hijacking method I saw on On that page, they have a fixed position container with everything in it absolutely positioned and on page scroll they translate3d the elements up -Y scroll position which I can do but they key ingredient they add is easing to that scroll tracking. So as you scroll the elements follow "recreating the scroll effect" but upon release slowly ease into their final place which is the end Y scroll position. I've found this StackOverflow question,, where it talks about javascript easing mixed with parallax, however, I can't seem to figure out how to apply it to what I'm doing or what I want my end result to be. I also found this JSFiddle where it adds easing based on mouse movement that I thought might be helpful to use pieces from for easing, I've added a link to my current CodePen example with my starting point, any help achieving/deconstructing what Adidas Climazone is doing to add easing to their scrollY transforms would be eternally grateful! Another demo I did on JSFiddle is here: Bonus if I can use GSAP for this!
  7. Ali Farooq

    Transfrom Rotate 360 Glitch

    Hi, I've encountered a small bug relating to the rotation property. As you can see in my codenpen I'm rotating a single Gear in the SVG. It is being animated to 360 degrees and is repeating indefinitely. The behavior is as expected except the fact that if you observe carefully, there is a slight jerk/glitch/delay whatever you call it, in the animation. It becomes more noticeable as we slow down the animation. I swear I saw a post regarding this bug on this forum some time ago but now I can't find that post that's why I'm asking again. Is there any way this can be fixed? Any help would be really appreciated. Many Thanks! Ali
  8. There is a group in the svg named 'p1-1_abc_1', and set transformOrigin: 'center center'. It works great in Chrome, but the position of 'p1-1_abc_1' jumped in safari when the timeline start. Safari: Version 10.1.1 (12603.2.4) Chrome: Version 58.0.3029.110 (64-bit)
  9. Hi guys, I set up a very minimal test case here: Setting up a draggable with type x or y on an SVG element causes a problem on Chrome on Android: I can't move the element more than a couple px at a time, and the drag is not smooth. I can see this behaviour on multiple Android devices. I first thought this might have to do with the fact that in Chrome, GSAP uses CSS transforms in SVGs instead of attributes, but since that changed in the last version and the problem still persists, I guess it's something else. In this case I could simply use a proxy object and set the cx/cy values of the circle, but the project I'm working on is much more complex, so I'd like to avoid that if possible. Do you have any ideas on how to fix this? Thanks!
  10. 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!
  11. Hi, I just came across this wonderful product and realized this is exactly what I need! I have a huge image that is x times the window size, so I want to scroll to the very bottom of it on button click. I would do so with CSS like this: @keyframes { to { transform: translateY(-100%) translateY(100vh); } } This proved to be a crossbrowser way in CSS instead of: transform: translateY(calc(-100% + 100vh)) .Is there any way to do so with TweenMax? I do understand that I can calculate these values in pixels and specify them explicitly: var value = -$('img').height() + $(window).height(); var tweenDown ="img", 5, {y: value}); However the advantage of the "stacked" way is that when you resize the window, it keeps the image in the same position. Thanks in advance!
  12. zachschnackel

    Transform merge bug

    Hi all! I'm noticing an issue with GSAP merging in transform properties originally formed in the CSS. I've attached a CodePen to show the issue. In Chrome, you'll see that both Dropdowns align to the center as intended. But in Firefox, IE11, and Edge -- it looks like the transform matrix that is generated is not including the calculated width of the dropdown component when transitioning. We can't use fixed widths (in the example that works) for a certain application, and found it really odd that only Chrome and Safari are handling this alright. Let me know if you need anymore info. Thanks as always!
  13. Hello guys, GSAP newbie here, hope someone can tell me what I am doing wrong. When I define scaleX value in transform attribute of SVG <g> it doesn't seem to be recognised by GSAP. Only when I explicitly set scaleX (line 2 in JS) does the tween work as intended. Translate values seem to be recognised just fine.
  14. barklund

    SVG and DOM transform vs CSS transform

    Hi there, (newly registered, but long time user) I have a problem with SVG transitions. If I have a SVG object with a CSS transform and try to tween it, the tween will set an (ignored) DOM transform attribute and nothing happens. Using force3D has no effect, as it still only sets the DOM attribute and not the CSS property. Something is clearly wrong here. When is this an issue? When using Draggable, as Draggable sets the CSS property. Once a Draggable has been updating the value, I can no longer tween it - even if I kill the Draggable. Regards, Morten
  15. marianrick

    Rotate SVG path around its center

    Dear Greensock Community, my task is simple and clear: I want to rotate a svg group <g id="rotationFrame>. I have written the following TweenMax to achieve this:"#rotationFrame", .5, { rotation:rotationDeg, transformOrigin:"50% 50%" }); This does work quite good using safari. But as soon as I switch to Chrome the code does some crazy stuff: Demo: How can I solve this? To me it seems like Greensock is creating some wired css code, like transform-origin: 0px 0px 0px; transform: matrix(-0.86602, 0.49999, -0.49999, -0.86602, 957.167, 575.015); As soon as I change this manually to something more straight forward, it does work in chrome: transform-origin: 50% 50% transform: rotate(90deg);
  16. Hey People So, I'm trying to animate a bunch of elements from already centered positions. My problem is, when animating something that includes a transform-tween (ex. xPercent: og just x:) the tween seems to overwrite the existing transforms in the css by creating the matrix used by gsap. I'm certain there is a easy fix for this, I'm just not seeing it clearly....
  17. mouret

    Use .set and keep existing css?

    If i have set transform either with css og TweenMax.set - e.g. transform: translateZ(100px); can I add other transform translates/rotations/etc. and keeping the translateZ?
  18. fernandofas

    will-change issue Chrome

    Hi guys, I just an article on the GSAP Blog about the "will-change" and Chrome issue with scaling images and after copying the codepen provided in the article I started to play around a solution that possibly could help lots of devs around. So, if you read this article, you will see that the first image get blurry when scaling. I added "transformPerspective" and "z" properties on the animation and the scaling goes smoothly and works well. I have been using it for a while now and I hope you guys can find it useful as well. See the codes modified here: Kind regards, Fernando Fas
  19. Hello, how would you scale back from a hi-res image to a lo-res like so: That particular example uses canvas elements which I'm not familiar with so is there a way to go about achieving the same effect using Greensock TimelineMax? I know some transform origins may have to come into play but I'd like to achieve a seamless transition as in the example provided. Thanks!
  20. NoRabbit

    Jittery scale on Chrome (see codepen)

    Hi all I'm encountering some jittery animation on chrome while animating the scale of a div using TweenMax (as well as other tween engines). In the codepen, the div with the image is encapsulated inside other divs in order to reproduce the conditions of the project I'm working on. I also put a css animation counterpart that doesn't have that jittery effect. I'm wondering why it is only happening with js tweening engines... I'm only seeing it on chrome (win & mac), it works nice on ff and safari (haven't tried edge yet). Except on ff mac, I get the jittery effect when i'm hovering the div. Do you also have that problem ? Is there a workaround ? I tried the "z" attribute and also put a translate3d on the parent. Thanks. Thomas.
  21. Hello, I am working with SVG object (Map), I have divided it by regions and now trying to append on-click zoom-in and zoom-out function. I have decided to make zooming function via changing Transform's "scale" and "translate" properties. Example is here: Just check JS lines, and for test click on red object. I have used TweenMax library for transition change of up mentioned properties. My problem is a visual of transition, the "zoom effect" does not go straight to object, it starts from left and then goes to object. I think reason for it is asynchronous change of "scale" and "translate" properties. but I am not sure how to fix it. Can anyone explain why it does this? and help me to fix? I would like to make "zoom effect" to look like this: Thanks in advance.
  22. swampthang

    Raphael Plugin for Free Transform Tool

    I'm looking at the Raphael FreeTransform tool on github and wondering if anyone has been able to successfully integrate that into GSAP via the Raphael Plugin. Need a FreeTransform tool and that one looks pretty good. Just don't want to do anything that causes conflicts with GSAP, etc. Also, really all I need is the ability to add selection handles that allow resize and rotate. I of course need drag but not sure if that will conflict with GSAPs draggable. Any insight from someone with experience in this would be greatly appreciated.
  23. Hi all, I have svg with couple of rectangles and I would like to scale them randomly while hovering with respect to the svg origin. At the same time I would them to rotate individually around their axis. The problem is that either transform origin gets overwritten by svg origin or vice versa. See the pen The rotation is commented out. Thanks a lot for any suggestions!