Jump to content

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

Search the Community

Showing results for tags 'transformorigin'.

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


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. Hi. I am starting to go mad trying to resolve this, so I thought I would post a question here instead. I am try to implement a rotation such that everything on the page view box (the outermost group -- depicted by the purple outline) rotates about its pre-defined origin point (shown by the cross - located at 50% 50% of view port in this case, but could be anywhere). At present the resultant rotation is relative to the compound contents of the Group (i.e. all the House elements) -- spinning around itself , whereas I need it to be relative to the parent view box -- effect
  2. Hey GSAP enthusiasts, I have a problem with the following scenario: I have two image elements: .el { position: absolute; width: 100px; height: 100px; } .el1 { transform: matrix(1, 0, 0, 1, 100, 100); } .el2 { transform-origin: 0 0; transform: matrix(0, 1, -1, 0, 400, 100); } The second element "el2" has an initial rotation applied and also the transformOrigin set. Now I use gsap to animate both elements like this: gsap.to('.el', { delay: 2, repeat: -1, yoyo: true, transformOrigin: '50% 50%', scale: 2 }); When running in the br
  3. GreenSock


    With the help of the CSSPlugin, GSAP can animate almost any CSS-related property of DOM elements including the obvious things like width, height, margin, padding, top, left, and more plus more interesting things like transforms (rotation, scaleX, scaleY, skewX, skewY, x, y, rotationX, and rotationY), colors, opacity, and lots more. Because animating DOM elements in the browser is so common, GSAP automatically checks to see if the target is a DOM element and if it is (and you haven't already defined a "css" object in the vars parameter), the engine creates that css object for you and shift
  4. Ok, so here are 2 almost identical tweens. Both initially set transformOrigin of bars to bottom-center. The first one uses gsap.from() and it works weird, looks like it's some bug (or perhaps I miss something?) The second one is almost the same, but it uses gsap.to() and transformOrigin seems to work fine. What could be the reason for such behaviour?
  5. When it comes to animation, SVG and GSAP go together like peanut butter and jelly. Chocolate and strawberries. Bacon and...anything. SVG offers the sweet taste of tiny file size plus excellent browser support and the ability to scale graphics infinitely without degradation. They're perfect for building a rich, responsive UI (which includes animation, of course). However, just because every major browser offers excellent support for displaying SVG graphics doesn't mean that animating them is easy or consistent. Each browser has its own quirks and implementations of the SVG spec, causing qu
  6. Hello GreenSockers, You guys are so awesome and thank you for providing this platform. Today, I saw this beautiful accordion animation https://uimovement.com/design/beaches-app/ and I want to create the same effect using GS. Is it possible to create this effect using in GS? Thanks in advance.
  7. Hi, So this is a simple rotation animation that works well on all browsers but Safari. Can't figure out why this is happening. Any ideas? (Chrome for desired results, Safari for wrong ones) Thanks!
  8. I'm at a loss. I cannot replicate this issue in a CodePen so sorry in advance. Here's what I have: var aiAnimations = (function () { function init() { TweenMax.set('.ai-hero__flare', { opacity: 1, transformOrigin:'50% 50%'}) TweenMax.from('.ai-hero__flare', .7, { scale: 0, ease: Power3.easeOut }) } return { init: init, }; })(jQuery); $(document).ready(function () { aiAnimations.init(); }); The output is: element { transform-origin: 0px center 0px; opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0); } I cannot figure out
  9. I am unable to get the transformOrigin property to be centered within the object. It is being set to 0px 0px regardless of whether I have a 'transformOrigin' property defined or not. The codepen illustrates this issue: https://codepen.io/ron-itelman/pen/xzqMWN?editors=1010
  10. Hello great almighty GSAP forum, here I am with another question I'm having. Goal create some sort of traveling trail emitter that follows the object and being manipulated by scroll event. Also everything is responsive, relative to the SVG size.Progress/ attempts Got most parts working, however there're a few visual things I just can't figure out. I've tried manipulating x,yPercent, transformOrigin, svgOrigin on the <image> tag inside the <svg> Help needed I'd like to know how to make the image's transform origin to the tip or tail of the arrow how to properly adjust the em
  11. Hey guys, so i am wondering how i can animate my svg? It is only the second time i am doing this only this time it wont work. If i place in the css for instance : opacity:0; this will work. When i use .from opacity or autoAlpha:0 nothing happens. I also used transform origin in the inline style, that also works. What is wrong? Also no console errors in the browser. Would like to animate them so they look like a bar graph Thanks allot in advance
  12. Hi, I'm getting more and more familiair with GSAP and JS, but I'm only diving in to it since last week. Now I was playing around with the TweenMax.ticker and mousemove event based on: But I got stuck on trying two things: 1)move SVG paths in the same way as the circle element; I did get the rect element to work by changing the cx and cy into x an y, but I don't know how to interpret this with a path position, since the ticker event does not seem to work if I give the SVG group tag an id. 2)I attached a codepen sketch based on the pen from Blake Bowen; as you can
  13. Greetings GSAP community, I'm having some trouble getting an SVG origin to center. Please see the Codepen, there is not much else to explain. Thanks in advance for any help. ~Jareth
  14. Hi, I need to scale a polygon so that its "width" goes to zero. In the codepen its the pink element. It seems like the scale animation makes it rotates. I've included a blue rect who works perfectly. Is it normal behavior or did i miss something ?
  15. Hi all, I use TweenMax to try a animation bouncing down a image. The problem is when I using transformOrigin attribute ( transformOrigin:"bottom" ), the image do not scale rightly. I want the image scale from top to bottom. Can you tell me the solution for this problem? Sorry for my English. //here is svg circle. It's work normally var duration = 3; var tl = new TimelineLite({delay:0.2}); CustomBounce.create("myBounce", {strength:0.01, squash:2}); tl.to("#ball", 2, {y:200, ease:"myBounce"}) .to("#ball", 2, {scaleY:0.7, scaleX:1.1, ease:"myBounce-squash", transformOrigin:"bottom"}, 0)
  16. CodePen should demonstrate the issue I am facing. Clicking on RED should ideally rotate the "+" sign into an "x" sign by applying "rotation":45. However, this rotation must be done alongside changes in inherited height, which, as you can see, totally disturbs the rotation matrix. I am expecting the scale of the icon to change with relative box-position unchanged, i.e. the center of the icon as per transformOrigin property should stay the same relative to the parent box. Any help would be appreciated!
  17. Hi guys, I am trying to use the Attribute Plugin to ensure that my SVG also animates in Firefox, but can't figure out the correct syntax for this: .fromTo("#star",1, {attr:{transform:"scale(0.2)"}},{attr:{transform:"scale(1)",transform:"rotate(360)"}}) The issue: This above code ignores the fromTo scale tween completely and just rotates the SVG and this gives me a syntax error: .fromTo("#star",1, {attr:{transform:"scale(0.2)"}},{attr:{transform:"scale(1)","rotate(360)"}}) All I want to do is scale up and rotate the star at the same time from transformOrigin:"50% 50%". I tried th
  18. Sunday night, I could be doing so many things other than breaking Jack's toys couldn't I? Well, I am that boring sometimes. Sorry Jack. So, the combo that caused the weirdness is CustomBounce + percentage base movement + transformOrigin in a shape element of an SVG. As you will see in the pen (at least in Chrome), the element gets moved to the 0,0 position according to the transformOrigin you define. Not something desirable if you're trying to squash an element.
  19. Can anyone give me a clue as to why IE9 is rotating my SVG files differently than all other browsers? TransformOrigin doesnt seem to work the same (I have tried, %, pixels, and top), and it is going in different directions. The CodePen link should show the 3 lettter "A"s pointing to the left. But in IE9, they get squished and point down after a TweenMax.set call. Any thoughts? Thanks very much. Also posted here in case CodePen doesnt allow IE9 viewing: http://brendyn.com/test2/
  20. Hi, Is it possible to make an element that has a transform origin set to 'top left' rotate (using Draggable rotate) around the element's center, as if the transform origin was originally set to 50% 50%? I was thinking perhaps to temporarily changes the transform origin yet keeps the element in the same position in the onDragStart event and in the onDragEnd event to restore the 'top left' origin, is that possible? Thanks, Elior
  21. In the first lines of JS i´m doing: TweenMax.set(".big-flipper", { transformOrigin:"75px 0px -37.5px", }); Gsap is not applying the z value, when i inspect the element with google Dev tools the z value always becomes "0" no matter what value i use: transformOrigin:"75px 0px 0px", .... cheers
  22. In the linked codepen (http://codepen.io/anon/pen/JXeoYy?editors=1010), I would expect the image to move across the screen smoothly over 5 seconds, instead it jumps as though the transformOrigin values are not being tweened. Why is this, and how can I fix it? (Also, it doesn't seem to work at all in Firefox...)
  23. I am using TweenMax to animate the appearance and scaling of a Popup. It works fine in one view, but in another it occasionally does not appear until after the user starts to scroll the page beneath the Popup. The popup is just a div with three lines of text in three p elements. The animation of the popup is done as follows: var clickPos = String(event.detail.x) + 'px ' + String(event.detail.y) + 'px'; that.rootNode.appendChild(that.viewRoot); TweenMax.set(that.viewRoot, { scale: 0 }); TweenMax.to(that.viewRoot, 0.7, { scale: 1, transformOrigin: clickPos, immediateRender: true });
  24. Hi everyone ! I got a problem with Firefox. I'm trying to scale dot with transformOrigin set as "center", like in the code below: TweenMax.to(flux, 0.15, {scale: "1", transformOrigin:"center", delay: delayFlux}); In Chrome, I don't get any problem, the dot scale up properly (first gif). But in Firefox, the dot does something weird like in the second gif. I've tried with transformOrigin: "50%" or "50% 50%" without success. Do you have any idea about that problem ?
  25. I've created a bunch of divs that contain circle background images on my site. I've set them up to expand/contract on hover/mouseleave. The hover expand works great, but I can't get the transform origin to change. Maybe it's because they are absolutely positioned (which I can't change), but they all seem to expand from different starting points. The ones above expand from the top and the ones below from the bottom. Is there any way to get them all to expand from the center?