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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. 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
  2. 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.
  3. 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.
  4. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. 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 quite a few challenges for animators. For example, some browsers don't support CSS animations on SVG elements. Some don't recognize CSS transforms (rotation, scale, etc.), and implementation of transform-origin is a mess. Don't worry; GSAP smooths out the rough spots and harmonizes behavior across browsers for you. There are quite a few unique features that GSAP offers specifically for SVG animators. Below is a list of common challenges along with GSAP solutions. This page is intended to be a go-to resource for anyone animating SVG with GSAP. Before moving on, make sure you download the latest GSAP. Challenge: scale, rotate, skew, and move using 2D transforms No problem. 2D transforms work exactly like they do on any other DOM element. TweenLite.to("#gear", 1, {x:100, y:100, scale:0.5, rotation:180, skewX:45}); IE and Opera don't honor CSS transforms at all, so GSAP applies these values via the SVG transform attribute like: <g id="gear" transform="matrix(0.5, 0, 0, 0.5, 100, 0)">...</g> When it comes to animating or even setting 2D transforms in IE, CSS simply is not an option. #gear { /* won't work in IE */ transform: translateX(100px) scale(0.5); } Very few JavaScript libraries take this into account, but GSAP handles this for you behind the scenes so you can get amazing results in IE with no extra hassles. Challenge: set the transformOrigin (the point around which rotation and scaling occur) Another unique GSAP feature: use the same syntax you would with normal DOM elements and get the same behavior. For example, to rotate an SVG <rect> that is 100px tall by 100px wide around its center you can do any of the following: TweenLite.to("rect", 1, {rotation:360, transformOrigin:"50% 50%"}); //percents TweenLite.to("rect", 1, {rotation:360, transformOrigin:"center center"}); //keywords TweenLite.to("rect", 1, {rotation:360, transformOrigin:"50px 50px"}); //pixels The demo below shows complete parity between DOM and SVG when setting transformOrigin to various values. We encourage you to test it in all major browsers and devices. See the Pen SVG + CSS Transform Timeline by GreenSock (@GreenSock) on CodePen. More Details Morph <path> data even if the number (and type) of points is completely different between the start and end shapes! Most other SVG shape morphing tools require that the number of points matches. Morph a <polyline> or <polygon> to a different set of points There's a utility function, MorphSVGPlugin.convertToPath() that can convert primitive shapes like <circle>, <rect>, <ellipse>, <polygon>, <polyline>, and <line> directly into the equivalent <path> that looks identical to the original and is swapped right into the DOM. Optionally define a "shapeIndex" that controls how the points get mapped. This affects what the inbetween state looks like during animation. Instead of passing in raw path data as text, you can simply feed in selector text or an element and the plugin will grab the data it needs from there, making workflow easier. MorphSVGPlugin is a bonus plugin for Club GreenSock members (Shockingly Green and Business Green). Other SVG Gotchas GSAP does a lot to remove the hurdles of animating with SVG, but there are still a few things to keep in mind: The current SVG spec does not account for 3D transforms. Browser support is varied. Best to test thoroughly and have fallbacks in place. There are quite a few browser bugs related to CSS transforms on SVG elements, some of which can interfere with GSAP's ability to animate things properly so we'd strongly recommend only using GSAP to apply transform-related properties like scale, rotation, x, y, etc. In Chrome (at least as of June 2015), getComputedStyle() returns the WRONG transform values on SVG elements. It doesn't recognize any non-identity values. So, for example, if you apply a class to an SVG element and it has transform: scale(0), Chrome will say its computed scale is 1. Doh! The same goes for any transforms - if you rotate or move or whatever in CSS, Chrome reports it as scale:1, rotation:0, translate:0, etc. So when GSAP asks the browser for the current value, it'll get bogus data. In Firefox, if you apply a CSS transform to an SVG element, it overrides any transform that is applied via the transform attribute. So if you inspect the element in Dev Tools, you'll see that GSAP is animating the values perfectly in the SVG's transform attribute, but visually you'll see no changes because the CSS class defines something like transform: scale(0) which takes precedence over the transform attribute. As far as we know, there's no way for GSAP to work around this, so it's best to just avoid defining transforms via CSS and use GSAP directly, like TweenLite.set(..., {scale:2, rotation:30, ...}) Most browsers don't GPU-accelerate SVG elements. GSAP can't change that. SVG is lightweight and resolution-independent, but that also can be costly when it comes to performance because rather than just shoving rasterized pixels around (which GPUs are really good at), browsers have to calculate the geometry/paths on each frame. Flash developers will remember converting vectors to bitmaps using cacheAsBitmap. In Flash Player this led to considerable performance gains. Will be interesting to see if browsers offer developers a similar option. Browser support All SVG features in this article will work in IE9+ (IE8 doesn't support SVG) and all other major desktop and mobile browsers unless otherwise noted. If you find any cross-browser inconsistencies please don't hesitate to let us know in our support forums. Inspiration The SVG Animations collection above is just a small sampling of Chris' work. Be sure to also check out Chris Gannon's full portfolio on CodePen and follow him on Twitter for a steady influx of inspiration. Awesome SVG Resources A Compendium of SVG Information - Chris Coyier Understanding SVG Coordinate Systems and Transformations - Sara Soueidan Weighing SVG Animation Techniques (with Benchmarks) - Sarah Drasner SVG Immersion Podcast - Rob Levin Circulus.svg - Sara Soueidan Making SVGs Responsive with CSS - Sara Soueidan How to Scale SVG - Amelia Bellamy-Royds Transforms on SVG Elements - Ana Tudor Ways to use SVG Sprites in Animation - Sarah Drasner Get Started Quickly with GSAP Below are a few resources that will get you up and running in no time: Getting Started Guide with Video Jump Start Sequence Animations like a Pro with TimelineLite (video) GSAP Documentation
  5. 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.
  6. 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
  7. 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
  8. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. We're excited to announce enhanced SVG support baked right into GSAP's CSSPlugin. Now you can animate the rotation, scale, skew, position (and even change the transform origin) of SVG elements just like normal DOM elements. The chart below illustrates a number of cross-browser bugs related to CSS transforms on SVG elements. Four modern browsers interpret the same basic animation code in drastically different ways. Browser comparison (without GSAP) See the Pen GIFS: SVG + CSS Transform Problems by GreenSock (@GreenSock) on CodePen. Be sure to test the demo above in IE, Opera, FireFox, Safari and Chrome to see equal results. Find out how it all works In order to help a wider audience understand how to get around the obstacles of working with SVG, Jack wrote an article packed with tons of info, animation demos and a video showing all the juicy details on www.css-tricks.com. We're honored that Chris Coyier allowed us to share these enhancements and time-saving techniques with the wider developer community on his highly-respected blog. Get all the juicy details in: SVG Animation and CSS Transforms: A Complicated Love Story. The techniques discussed will surely transform your SVG animation workflow
  9. 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 ?
  10. GreenSock


    Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. 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. Don't forget to load the CSSPlugin to enable these capabilities. Normally, css-specific properties would need to be wrapped in their own object and passed in like TweenLite.to(element, 1, {css:{left:"100px", top:"50px"}}); so that the engine knows that those properties belong to the CSSPlugin, but because animating DOM elements in the browser is so common, TweenLite and TweenMax (as of version 1.8.0) automatically check 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 shifts any properties that aren't reserved (like onComplete, ease, delay, etc. or plugin keywords like scrollTo, raphael, easel, etc.) into that css object when the tween renders for the first time. In the code examples below, we'll use the more concise style that omits the css:{} object but be aware that either style is acceptable. See the Pen CSSPlugin by GreenSock (@GreenSock) on CodePen. Learn more in the CSSPlugin documentation.
  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%"}); });