en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en en en en en en en en pt en en en en en en en fa en en fr hbs_lat en en en es en en en ms en en en en en en en en en en en en en fi en en en en en en en en en en en en en en de en en en en en en en en en en en ca en en en en en en en en en ca en en en en en en en en en en en en en en en en en en en ca en en en en en en en en en en tr en en en en en en en en en nl en en es fr en en en en en en en fr en en en en en en ms pt nb en ms pt en fr en en en en en en ms nb en en ms en pt zh fi en en en en en en fr pt nb en fr pt pl en en en en en en pt nb en en pt fr en en en en en es pt nb en es pt en en en en en en en en en en ro nb en en ro pt en en en en en en pt nb en en pt en en en en en en en en nb en en en pt en en en en en nl en nb en nl en pt en en en en en hbs_lat en nb en hbs_lat en pt en en en en pt en en en en en it en en en en en en en es en de en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
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?
Typewriter-Effect from center using Splittext
Ledtobias posted a topic in GSAP
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
Moving every div to the perfect center of any screen
Nicolò posted a topic in GSAP
svg Issues with SVG transformOrigins
JarethB posted a topic in GSAP
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
Animate position inside a vertically centered div
jords posted a topic in GSAP
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.
wave posted a topic in GSAP
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.
nomn posted a topic in GSAP
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".
Modifying width after scale = not centered
hamstanim posted a topic in GSAP
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!
Simple Rotation about Centre
OliverHall posted a topic in GSAP (Flash)
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
Rotating around center with EaselJS, not always registration point is set
Luken posted a topic in GSAP
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.
“I just tried to animate some objects using vanilla js but it was really laggy- switched to GSAP and now it’s smooth af”
“GSAP and CSS Transitions: I've done both, and its like comparing an F16 to a horse. Take like 10 minutes to try.”
“Performance has been of paramount importance for GreenSock, so there is always peace of mind for us, developers.”
“+1 to GreenSock. It’s just one of the deepest and most reliable javascript libraries I’ve ever used”
“...obviously GSAP is incredible.”
“I really need to commit to using GSAP more in my daily work & demos. I love pushing native CSS animation as far as I can but every time I use GSAP I’m just blown away. Keep up the great work!”
“Reading through the GreenSock docs; been amazed like 14 times so far! How can a library be SO complete? Been using that for about 2 years now but man... This the first time I feel this way about a library.”
“It's shocking the @w3c didn't use @greensock as a model of how to do animation via code. Did they even ask animators what they use?”
“There is no doubt that GreenSock is currently the best available tool for creating astonishing interactive websites and animation effects.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.