Search the Community

I'm using gsap to make a div follow my cursor. Hence I need to center it. To do so I use the following code: gsap.timeline().to(innerCursor, 0.1,{ transform: `translate3d(${clientX}px, ${clientY}px,0) translateY(-50%) translateX(-50%)`, ease: Power1.easeInOut }); This works for Chrome, but not Firefox or Egde - how so? I know translate(-50%, -50%) isn't supported by Firefox, but how can I bypass this?

Hi everybody, I came across a problem of moving each div of my page with a tween. Looking on this forum i found lot of different solutions, but one works as expected. VIewing the page on mobile, the tween moves the div to the center, but using landscape or laptop seem to move it toward lower right corner. The code i'm using is the following: var t=new TimelineMax() t.to(divId, 0.3, {x: window.innerWidth/2, xPercent: -50, y: window.innerHeight/2, yPercent: -50}) .play() Any idea on what the problem is?

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

Hi, Each time I click on the button, I add a new (.box) in the list but I want to smooth the position of the others boxes (see my codepen) and still get the content vertically centered. As you can see I used flexbox. Thanks for the reply.

Is it possible in the JS version of gsap to rotate or enlarge an image about its centre rather than from a top corner? I think you can do this with the TransformAroundCenter plugin in AS but can't find it for JS.

Greeting to GSAP Team! Great thanks for making this amazing tool! Now about my problem, please, if you can, help me with it. I'm trying to tween backgroundPosition, but it's isn't work with some properties. For example: // This is NOT work TweenMax.fromTo($(this).children('a'), 0.8, {backgroundPosition: 'center left'}, {backgroundPosition: 'center right'} ); And this: // Now it Work TweenMax.fromTo($(this).children('a'), 0.8, {backgroundPosition: 'center left'}, {backgroundPosition: 'top center'} ); The starting background position of element (css style) is "center left".

http://jsfiddle.net/nqdaj3cL/ Hello! I have a (maybe simple) problem with transforms and GSAP: I want to scale a centered object and modify its width but as you can see in the fiddle, the object isn't centered after the animation. It's because the translate(-50%, -50%) isn't honored anymore as GSAP keeps in memory the initial x and y values. But if I remove the matrix in the inspector and modify manually a transform : scale, it centers fine. What can I do in this case? Thank you!

I have a problem, and can't tell if this is EaselJS or GSAP, but I think answer can be useful for users of GSAP . I'm loading bunch of images, and then trying to rotate them around center, but sometimes it doesn't work, I mean - they are not rotating around center, but 0,0. I'm not sure what I'm doing wrong, could someone help me? I'm loading bunch of images like that: var img_all = 2; cloud1.src = "/images/cloud1.png"; cloud1.onload = imageLoader(img_all); cloud1 = new createjs.Bitmap(cloud1); cloud2.src = "/images/cloud2.png"; cloud2.onload = imageLoader(img_all); cloud2 = new createjs.Bitmap(cloud2) And here is my function that tries to set reg. points after all images will be loaded: var img_comp = 0; function imageLoader(img_all) { img_comp++; if(img_all == img_comp) { cloud1.y = 350; cloud2.x = 400; cloud2.y = 300; cloud1.regX = cloud1.image.width/2; cloud1.regY = cloud1.image.height/2; cloud2.regX = cloud2.image.width/2; cloud2.regY = cloud2.image.height/2; TweenMax.to(cloud1, 30, { rotation: 360, repeat: -1, ease: Linear.easeNone }); TweenMax.to(cloud2, 40, { rotation: 360, repeat: -1, ease: Linear.easeNone }); TweenMax.ticker.addEventListener("tick", draw); } } But still sometimes, they are just rotating around 0,0 instead of center, what can be done better? Regards.