Search the Community
Showing results for tags 'transform-origin'.
Found 8 results
-
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 -
Hi, i'm trying to recreate the following hover effect with GSAP: Right now i'm trying to figure out how i set the transform origin correctly. The element that I want to tween is initially translated so the animation starts at the wrong position. Hope someone can explain me how to fix this. Here is my Pen: Thanks
-
Hey folks, I am using GSAP to get around the Firefox transform origin issues with SVGs and SVG child elements. I am applying animations to groups within an SVG. I have two SVGs, one that is for desktop sizes, and one for mobile. Each one calculates the 50% 50% transform origin on page load. However, on resize, when swapping to the alternate SVG for the different screen size, all the calculations are shifted and messed up for the one that was previously hidden. CodePen Demo Resize the window to see the issue. The SVG groups should be animating the same way. Is there a way to force GSAP to recalculate the transform origin on resize? This is the code I'm using: TweenMax.fromTo( elem, 0.75, { rotation: -10, transformOrigin: '50% 50%' }, { transformOrigin: '50% 50%', rotation: 20, ease: Sine.easeInOut, repeat: -1, yoyo: true } );
-
Hi everyone If you've been following my threads: this is the last bit of animation that I need to do, the thing that I picked GSAP for... animating SVGs. Up until earlier today I was having trouble implementing this, but... it was totally my fault, some sort of typo among the variable declarations messed it all up. Whoops... Anyway, I fixed that and got the animation to work in Chrome just like it did before I moved to GSAP! So I switched over to FF where it was having issues, and... well the same issues are still here? It seems you can't change the transform-origin of masks in Firefox (or IE, for that matter)? Check out the (fun) pen I made to illustrate the issue. It works perfectly in Chrome, and when you open it in FF you see that the transformOrigin var isn't working. Ideas on how to fix this...?
-
I've got this scene where a scale and transform-origin are being used together. On Safari the effect never takes places and I know of a hacky way to fix this, but wondering what a better solution would be? Here is the code I'm discussing. tl.to(worm, 1, { scale: 1, transformOrigin: 'bottom center' });
-
Hi! I'm working to new animation engine! Cross-browser and back to IE8 support for transform (rotate, scale, translate), but it's always uses transform-origin is 50% 50% or 0px 0px! I obtained and installed TweenMax.js CSSPlugin IE8 transform script and works on any transform-origin! My project is MIT-Licensed. Is it possible use code on my project free or need BUY license or completely restricted? Sorry for bad english!
-
Hello, I am trying to get a small scrollable body of text (the table of contents) to appear starting from under the button that is clicked to present the table of contents. Then I want the table of contents to disappear by a reverse animation back under the button when the user has selected a place in the table of contents. I have a solution that partially works, but if the user has scrolled to the bottom half of the table of contents, the tween to remove the table of contents is happening twice. Or maybe it is starting, getting interrupted by something, and then finishing. This is a 'single page' mobile app. So pages of text are being removed from the DOM when the TOC is shown, and added to the DOM when the TOC is removed. I don't know if I could fit the essential ingredients into a codepen, but these are the two tween calls that I am using. Show: TweenMax.fromTo(this.rootNode, 0.7, { css: {scale:0} }, { css: {scale:1, transformOrigin:"left top"}, ease:Power4.easeOut}); Hide: TweenMax.fromTo(this.rootNode, 0.7, { css: {scale:1} }, { css: {scale:0}}); Thanks for any help you can provide.
-
Hi there guys! I am a newbie to GSAP - discovered it while searching for universal cross-browser tool to make efficient animations for the web-sites. In short, it's great) I'm planning to use svg a lot, so it's crucial for me how it is handled in GSAP. I delved deeper and did some experimentation, and as a result I came up with what seems to be a bug: - 3D transform (rotationY, for example) does not work in Firefox, though, in contrast to IE, it is supported in FF. It took some time until I figured out that with earlier versions of GSAP (back from 1.14.0) everything's working fine. No problems in Chrome as well. - The next thing that annoys me a little is the necessity to use {transform-origin: "50% 50%"} each time to make svg element rotate around its center; as opposed to what is written in "getting started" guide, it seems that this value is not default for svg elements: their transformation is done around left top corner if {transform-origin: "50% 50%"} is not defined explicitly. See both cases on Codepen here http://codepen.io/anon/pen/jEmNyw. Thanks!
.thumb.jpg.f416748be840caa68db0fff529bfaffb.jpg)
