Search the Community
Showing results for tags 'transform origin'.
Found 4 results
-
I am trying to rotate a Z rotated element on the X/Y axis + perspective and transform-origin, and just can't get the GSAP result to be the same as with the CSS animation result. (My question relate to the attached codepen) In CSS I can first rotate the X component and only then apply the Z rotation, which creates a different animation than the other way around. GSAP (as far as I know) has a fixed transforms order (I remember @GreenSock writing about it years ago), but still, I tried and tried and wasn't able to get the same animation in both CSS and GSAP (using a single element) Thanks!
-
Hi, I want .home__links-container element to rotate around smiley face. To see exactly what I mean you can open codepen in Firefox or uncomment .home__links-container styling (starts in line 22) and handleRotate function (starts in line 1) and comment out TweenLite.set (line 13). The problem is that on Chrome the .home__links-container element that contains links is bigger than parent <svg> and the circle menu is not in the middle of .home__links-container. On Firefox however .home__links-container has (almost) the same size as parent <svg> and rotation works as expected - see screenshots https://imgur.com/a/Udzvx1D. I don't understand why Chrome doesn't calculate transformOrigin set by TweenLite correctly. Can someone help me with this? I can set Draggable rotate on parent svg but then smiley face rotates too and I want to avoid it.
-
I'm trying to rotate this robot arm around its shoulder. Id like to have the purple circle stay in one place and for the arm to rotate around its center, but I cant get it to work.
-
I forked this off of codepen. http://codepen.io/magalhaespaulo/pen/OyQeQv But mine does not render correctly on iOS. The road and clouds rotate correctly, but the city is way off on iOS. I am trying to get it to work so I can use it on a banner ad.
