Search the Community
Showing results for tags 'transformorigin'.
Found 47 results
-
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 -
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
-
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...)
-
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.
-
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 ?
-
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?
-
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
-
Please, could You explain me why the rotationX params doesn't fit like rotationY & rotationZ in my 3D cube test?
-
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.
-
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
-
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?
-
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.
-
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
-
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.
-
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.
-
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.
-
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
-
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
-
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
-
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
-
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?
-
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%"}); });
