Jump to content
GreenSock

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

Search the Community

Showing results for tags 'transformorigin'.



More search options

  • 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

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 40 results

  1. 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 browser I see the second element "el2" making a jump to the right, before the animation starts. I know that it's not the best practice to set transforms/origin in CSS instead of initialising these properties via gsap.set(...). But in my scenario the code (Markup and CSS) is being generated, so I don't have control over it. Is there anything I am missing or is this an unsupported edge case? (Not 100% sure if this comment might be related: ) Thanks in advance and keep up the amazing work. (BTW: loving the new ScrollTrigger :)
  2. GreenSock

    CSSPlugin

    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 shifts any properties that aren't reserved (like onComplete, ease, delay, etc. or plugin keywords like scrollTo, morphSVG, pixi, etc.) into that css object when the tween renders for the first time. We recommend using the more concise style that omits the css:{} object but be aware that either style is acceptable. Learn more in the CSSPlugin documentation.
  3. 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?
  4. GreenSock

    Animating SVG with GSAP

    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. Challenge: Scale, rotate, skew, and move using 2D transforms No problem. 2D transforms work exactly like they do on any other DOM element. gsap.to("#gear", {duration: 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: gsap.to("rect", {duration: 1, rotation: 360, transformOrigin: "50% 50%"}); //percents gsap.to("rect", {duration: 1, rotation: 360, transformOrigin: "center center"}); //keywords gsap.to("rect", {duration: 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. 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 in-between 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 gsap.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+ 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 SVG Gotchas! Understanding SVG Coordinate Systems and Transformations - Sara Soueidan Improving SVG Runtime Performance - Taylor Hunt A Compendium of SVG Information - Chris Coyier Weighing SVG Animation Techniques (with Benchmarks) - Sarah Drasner Making SVGs Responsive with CSS - Sara Soueidan How to Scale SVG - Amelia Bellamy-Royds Transforms on SVG Elements - Ana Tudor 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 Sequence Animations like a Pro (video) GSAP Documentation
  5. 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.
  6. 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!
  7. 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 what is going wrong with transformOrigin. I'm loading GSAP v: 2.0.2 via NPM and am compiling via Gulp. If I remove the line with transformOrigin nothing shows up for transform-origin inline, so it's not being overwritten elsewhere. Any ideas? I can set the transform-origin in my CSS, but I'd rather control it via GSAP. Thanks, Ryan
  8. 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
  9. 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 emit position so it sync with the arrow tail.. Actual travelling route doesn't have to follow the predefined path strictly, it's more important getting the emitter right. I don't know how autoRotate works under the hood, by the look of the relationship between particle and the arrow position, seems like a "invisible bounding box" is created, and the arrow rotate inside the box, and the box takes on the bezier curve data. Question outside of this topic Why isn't <image> tag visible on Safari, let alone IE?? The emitted particle shows on Safari but seems the percentage position is way off? Seems like line 48-51 behave differently on Safari. Added on 19th of April To answer my own question for peoples reference. <image> tag needs an inline width and height attribute in browsers other than Chrome, somehow other browser can't take the CSS and apply it to <image> tag within svg; Thanks a lot!
  10. timdt

    Animate SVG <g> group

    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
  11. 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 see I simply added a timeline to rotate one of the elements. Now I want this to keep on rotating around the origin value of the element, but this doesn't happen. The origin point stays on the begin value of the element (which is the top left corner) and does not move accordingly to the mouse position. Initially I want to be able to do: 1)move SVG paths based on mouse position 2)know how to apply more than the change of position accordingly Can anyone help me? Please let me know if my question is unclear. Thank you in advance!
  12. 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
  13. 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 ?
  14. 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) // Problem here, when I replace circle by an image. the transformOrigin bottom no working var tl2 = new TimelineLite({delay:0.2}); CustomBounce.create("myBounce2", {strength:0.01, squash:2}); tl2.to("#burger", 2, {y:200, ease:"myBounce2"}) .to("#burger", 2, {scaleY:0.7, scaleX:1.1, ease:"myBounce2-squash", transformOrigin:"bottom"}, 0)
  15. 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!
  16. 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 that as well as transform-origin:"center center" inside the Attr plugin with no luck. Thanks!
  17. 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.
  18. 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/
  19. 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
  20. 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
  21. 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...)
  22. 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 }); The css for the popup is as follows: #attribution { position: fixed; width: 80%; top: 10%; margin-top: 7%; margin-left: 7%; margin-right: 7%; padding: 3%; text-align: center; z-index: 200; background-color: rgba(255, 246, 233, 0.9); border-radius: 25px; border: solid; border-width: thin; box-shadow: 4px 4px 4px #777; -webkit-box-shadow: 4px 4px 4px #777; } Any ideas what could cause the delay in drawing, which sometimes occurs? When the program first starts, it will work fine, but after a while each popup does not appear unless one starts to scroll. Thanks for any help.
  23. 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 ?
  24. 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?
  25. Hello, I'm having an issue with transformOrigin and svg groups. It's not really a GSAP issue, everything is working as it should be. It's more that I cant work out how to get the correct transform origin psoition. Essentially i have a bunch of concentric circles, with little dots on them. Each set is in it's own group. I'd like to rotate it so TransformOrigin: '50% 50%' might seem the logical choice. However the issue is that since I'm rotating the group and the group isn't the same size as the 'main circle' (which is also the 'rotate path') the transform is off (great if you liked spirograph as a kid, not so great for me). The problem is occurring because some of the edges of the little dots that sit on the larger stroked circles are not flush with the main circle, so the group tag naturally wraps around the outtermost elements. In the one circle group I've animated successfully, I've simply been able to set the radius of the inner circle as the Transform Origin but this only works because the top and left bounding of the group matches that of the main circle, where a dot pushes the group out at the top and left, this doesn't work. The pen will help you to understand this a little better, especially if you inspect the svg and see how the group box is larger (often on all sides) than the circle that makes up the animation path. What I was wondering is if anyone knows of a way to calculate the correct transform origin position, or if there is a simpler solution/ best practice I should be following. In the pen, the first circle in each SVG group is the 'main circle' (the stroked circle that makes up the animation path), the other circles are the little dots. Yes, I know that is a massive svg with billions of elements, and I apologise for that. http://codepen.io/peterallenio/pen/LGZYxa Thanks in advance
×