Jump to content

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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. I'm trying to create an infographic using scrollmagic/greensock, where I have everything in layers, and each layer tweens down to nothing as you scroll down, so whatever is beneath it is revealed on scroll. I already tried using svgs and clippaths, which was a nightmare since I'm new to them and scrollmagic both. So I decided to use css border-radius. My problem right now is that I'm trying to scale these down and nothing seems to be happening. If I look in my console I will see the styles scaleX: 0 and scaleY: 0 have been applied but the image will still be the same width and height. It doesn't move at all.
  2. Hi all, I'm having an issue with transformOrigin combined with scale in Chrome (for OSX) (not the case in FF or Opera). Check a box, and click the CORRECT button. The 'check' jumps up the the viewBox in Chrome, but stays nicely centered in FF and Opera. This Pen has been fixed to show solution. http://codepen.io/ryan_labar/pen/vNozXO
  3. Hey there, I have been digging into SVG a bit recently, following some of the posts of people raving all about it. I have a decent understanding of the viewbox and the coordinate system, at the very least to know there are gotchas there. In the pen attached, I have some tests about scaling and the transform origin. It is interesting to see that if I try to scale a <g> tag it will default to the top left of that tag, not the 0,0 of the coordinate system. Also if I set the transform-origin to anything other than the default value, it will - for some reason, break the actual positioning of the <g> but not in a manner I would expect. But the same thing does not happen if I try to scale up a <path> element. I have seen Chris Gannon's SVG banner, haven't taken it completely apart yet and so, I would expect to find something interesting when I do. anybody with some insights as to why this behavior when manipulating the transform origin?
  4. Any chance transformOrigin tweening will be added to an upcoming release? I have a bunch of uses for that if it were added. The attached codepen is an example. I wanted to rotate and move the phone simultaneously but couldn't. To do that I would need to animate the position, rotation, and transformOrigin of the image at the same time. Here's another example. I'd really like to Greensock-ize something like this, but that also requires animating the transform origin.
  5. Hey there! I'm having an issue rotating an SVG element from its center. I know that it's one of GSAP's strengths to take care of the complexity behind transform-origin for SVGs and I never had this issue before. Basically I have an infographic SVG that has 4 main circles with illustrations and I want to rotate them a bit on hover with this: jQuery("g#weight-lifting-p, g#sprinting-p, g#cardio-p, g#walking-p").hover( function() { TweenMax.to(jQuery(this), 0.2, {rotation:15, transformOrigin:"50% 50%", ease:Back.easeOut}); }, function() { TweenMax.to(jQuery(this), 0.2, {rotation: 0, transformOrigin:"50% 50%", ease:Back.easeOut}); } ); The strangest thing is that it works for g#weight-lifting-p, g#sprinting-p, but the other 2 won't rotate from their center in Chrome and Safari. All 4 work perfectly in Firefox and I can't tell for IE because I don't have any way to test it there. They rotate with a transform-origin that's wrong. It almost feel like something is wrong with my SVG that confuses GSAP or Chrome/Safari? I exported the SVG from Illustrator. I had a designer create it and it works with a legacy version of Illustrator, but I put the finishing touches and did the SVG export from the latest Illustrator CC. I tried exporting with different options, still no luck. I also looked into the SVG code around one shape that works fine and one that has issues, but everything seems consistent. My SVG starts out like this <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 1010.4" style="enable-background:new 0 0 612 1010.4;" xml:space="preserve"> And I use jQuery to load the SVG like this: jQuery( document ).ready(function() { jQuery("#staging").load('http://paleoleap.com/infographics/exercise-infographic2.svg',function(response){ I'm not sure if I'm doing something wrong, but like I said it's the first time that this happens, because normally doing any transforms from a transform-origin of 50% 50% works like a charm with GSAP. If anybody has any idea why this is happening I would greatly appreciate. Seb
  6. Hi there. This seems rather simple but actually might not be as a simple of a solution as I was hoping for. I'm trying to transform the height of a div: #mountain { position: absolute; top: 175px; left: 18px; width:123px; height:46px; background-image:url(mountain.png); } Using this GSAP TweenMax.from('#mountain', .5, {height:0, transformOrigin:"bottom"}); On <div id="mountain"></div> However it does transforms the height, it scales the div from the top down regardless of the transformOrigin setting. What am I missing? I suspect transformOrigin does not cover height? Can you suggest a workaround for what I'm trying to accomplish? Thanks.
  7. hi I want to make my div animated like this swf file. but it sound's to me like I can't do so because of my misunderstanding of transformOrigin system. here is my code: js: TweenLite.set("#pageone", {perspective:750}); window.onload = function(){ tweens(); }; function tweens(){ TweenLite.set("#header",{rotationX:180,opacity:0}); TweenLite.to("#header", 2.5,{rotationX:0,opacity:1, transformOrigin:"0px 0px 0px",ease: Elastic.easeOut.config(1, 0.3)}); } html: <body> <div data-role="page" id="pageone"> <header> <div id="header"></div> </header> </div> </body> the tween happens but not as expected.
  8. Is transformOrigin supported in IE9? If not, is there a work around? Strangely enough I don't have an issue with this in IE 8. Box 2 is supposed to rotate from the top but doesn't seem to do this in IE9. Thanks in advance. Any suggestion is much appreciated.
  9. 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
  10. Hi, I'm trying to have different transformations such as rotation, scale, skew, etc to animate with different transformation origins. The code pen shows a simple example of the problem where i'm trying to scale from top left origin and then rotation from center. http://codepen.io/Spekumi/pen/raNEvx What I expected it to do was rotate from the center of the result of the scaling. So basically, i shouldn't be seeing the black background. Is it possible to do this? Thanks
  11. Hey guys, I was playing with the sample here http://codepen.io/GreenSock/pen/yzahJ and forked it to this http://codepen.io/SnapToPixels/pen/zvGos When you rotate on the Y the origin is from the center When you rotate on the X the origin is from the top How can I get it to rotate the X and have the origin be the center? Thanks guys - P
  12. So I realise that transformOrigin is a CSS property and thus don't expect it to work when tweening scaleX and scaleY of an EaselJS Bitmap, but is there any way I can achieve the same ends? Tweening using a top left origin isn't always ideal. Thanks
  13. Hi, i recently tried to combine greensock with createjs/easeljs. I made this: chicken = new createjs.Bitmap('images/chicken.png'); TweenMax.set(chicken, {css:{transformOrigin:"50% 50%"}}); canvas.addChild(chicken); I know that transformOrigin is a css property method, but can i use it for object in canvas? If 'CAN', how do i do it?
  14. Hello! I am currently facing an issue with animating in cirlces/dots. The process I am using is that I have a transparent .png, which animates from zero width to 20px, for example. The problem comes with the transformOrigin, which when set to 50% 50% still animates in from the top left of the element. I have tried various methods of using CSS, to create vertical and horizontal aligning <div> in a parent <div>, but this doesn't create the effect of the dot animating from the centre of itself. I have hosted my current code here. $(function() { var tl = new TimelineLite(); tl.to( $(".dot1"), 0.5, {css:{width:"20px", height:"20px"}, transformOrigin: "50% 50%"}); tl.to( $(".dot2"), 0.5, {css:{width:"30px", height:"30px"}, transformOrigin: "50% 50%"}); tl.to( $(".dot3"), 0.5, {css:{width:"25px", height:"25px"}, transformOrigin: "50% 50%"}); tl.to( $(".dot4"), 0.5, {css:{width:"5px", height:"5px"}, transformOrigin: "50% 50%"}); });