Jump to content

Search the Community

Showing results for tags 'center'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


  • Learning Center
  • Blog


  • Products
  • Plugins


  • Examples
  • Showcase


  • FAQ


  • ScrollTrigger Demos


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 10 results

  1. 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?
  2. Hello, I was wondering if there's a way to use greensocks Splittext to create a typewriter-effect starting from the center, so that the first character starts in the center an the whole sentence will move to both sides, like in the example on codepen below Thanks, Tobias
  3. 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?
  4. 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
  5. 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.
  6. 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.
  7. 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".
  8. 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!
  9. Hi there, I have a feeling this is a really stupid question simply because it feels like it should be so easy, yet I can't find a solution online that will work for me. I have a Sprite that I want to tween the rotation using the "shortRotation" plugin. Everything is generally ok, except that: 1) The rotation is occurring around the top left point of the Sprite rather than the centre. I had read that the default transformation point is the centre, but then I saw a post that suggested this may have changed? 2) I've tried specifying the transformOrigin using two methods I found online - neither of which work. This is my basic call: [public var _secondHand:Sprite = new Sprite();] TweenLite.to( _secondHand, 1, {shortRotation:{rotation: _secondsDeg } } ); I read that one could specify the origin as a parameter: TweenLite.to( _secondHand, 1, {shortRotation:{ rotation: _secondsDeg }, transformOrigin:"50% 50%" }); This results in a runtime error as transformOrigin isn't a property of Sprite... Should I not be using Sprite?? I also read that you can set a property value on an object using TweenLite.set( ... ). I tried this too but it also fails at runtime. I've also seen references to another plugin "transformAroundCenter" (and AroundPoint) but I don't have Club membership so I don't have these plugins. Have these plugins replaced support for transformOrigin? Please help! I really like TweenLite so I'm hopeful I can get this to work! Cheers, Oliver
  10. 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.