Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'scale'.

  • 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


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



  1. I have an animation with lots of SVGs. They are rendered beautifully, scaled up and everything, on initial load. Once you move forward or backwards in the animation (by clicking one of the big blue arrows or a light brown mangrove root), the roots become blurry, especially the ones closest to you, even after the animation has completed. The animation is mostly one timeline which loops. It begins paused. The motion is created by advancing in time in the timeline by passing a value to pause. I looked around online and saw some suggestions like setting transform3d to auto, but that didn't work for me. I'm hoping this is a familiar problem to you veteran animators. I've attached a before (left) and after (right) picture but looking at the animation is probably the easiest way to see the behavior: http://catalyst.goodlookingsoftware.com/a/ Thanks again! Aaron
  2. Hey all! In the attached codepen, my tween causes the element in question (a red treble clef) to become huge before moving. Is there a way to stop it from jumping size and positions like that? As you can see in the codepen: setTimeout(function() { var clef = document.getElementById('Clef_0_1@1'); TweenMax.to(clef, 10, { x: 100, y: 100 }); }, 1000); The JavaScript only specifies a translation, but I get the sense that the original position is shifted first and it's clear that the original scale is obliterated. Many thanks for your help!
  3. I'm trying to get this tween to work with an eventListener, and it works fine if I pull it out of it, but as soon as it's back in the event listener, nothing happens. I've also tried doing it with jquery and using .play() and .pause() and I am getting the same issue. I also tried setting the event listener to the clippath itself, rather than the circle, and no joy. No idea what's wrong here! I'm working directly off this other codepen and it works fine there. http://codepen.io/rorytawn/pen/OVeWNB
  4. Hello, i'm new in GSAP and i found a strange bug when try to use {scale: 60} round object Screenshot: https://goo.gl/GgkaLt Edge: https://goo.gl/nm6l5G =D Codepen: http://codepen.io/wildsol/pen/Boryxg Any ideas? PS: If use {width: 300, height: 300} - everithing is good PSS: If i use css animation transform: scale(60) - everighting is good
  5. Both with Draggable and even without it, I can't get clear text when scaling. http://codepen.io/anon/pen/eNajXR
  6. 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.
  7. Hi, I've been working long on the chart for the client yet I cannot solve the slow Firefox zoom problem. Here's the limited version of the SVG chart that exibits the problem: http://codepen.io/mattsrinc/pen/mJMRMX Now please try to click on the light blue areas (of the cow drawing shown). The neck and the part at the top are set to be zoomed (scale-d) two times while the bottom parts are set to zoom to three times larger. The (zoom) animation is slow and unusable on Firefox (when other parts are added, even in this limited version the slowness is noticable). Safari and Google Chrome are great - testing all this on MacBook Pro, Windows experience is similar. Because of the shaking text animations I have already scripted timelines to have text appear after the zoom ends. Is that because of the (known) scaling bug in the Firefox? I've tested different tricks mentioned in the forum (rotate by 0.01, z etc) yet it doesn't help. When I have explained the issue to the client I thought about simple changing the viewbox of the SVG e.g. having a final view a zoom by using SVG attributes and GreenSock somehow animated the tween (if it would not call scale command implementation). Dear community members, is there any workaround to get same fast animation like in Chrome and Safari? And no, no Flash please - never scripted it.
  8. Hi all, I've encountered a strange situation: when an item whose css position is set to 'fixed' is placed within another div that has been scaled using TweenMax, the fixed item is no longer fixed. Any ideas?... Thanks for the great work ! Elior
  9. 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!
  10. Hi, is there any way to disbale "translateZ(0)" hack in v1.15.0 ? Please check the codepen example in Chrome. When I use v1.14.2 it looks cool, but with v1.15.0 scale looks very blurry on webkit based browsers.
  11. Hi all, Recently switched to the JS environment, after working with Greensock for some months in Flash. I have a question: I've been working on a banner ad where a DIV is rotatated and scaled. It is a scale up of 20% over 4 seconds, causing FireFox to render the animation not very smoothly. Chrome works like a charm and Safari is having some problems too I guess (I couldn't watch it on IE yet...). I added a codepen, but have the feeling the effect is a little bit worse in my own file. Any ideas how this is caused? Is it the rotation combined with the scale? Thanks in advance!
  12. Hello and thanks for any help you can provide guys. Here´s my little issue: I have a map I need to zoom in/out this map. When zoomed in, users may drag it to see the details. Everything works, until I try to reset the map to it´s original scale/position. If I dragged the map, when the zoom out is selected, the scale goes right, but the position goes wrong. I want the position to be reset to the original values but it goes crazy if I made a drag of it. Also, as a plus....it is possible to make this zoom in, according to the user mouse click? Sorry for my grammar! Regards!
  13. I can't seem to figure out how I'd set the transform point so that I could have it scale from the right, bottom, etc. Thanks! - Lance
  14. Hi, in my current HTML5 project I need especially the scale and rotation skills from GSAP and one of the requirements is, that it have to run on IE8. Now I took notice that it doesn't works. I tested it at first in IE11 and emulating IE8 and after that I used an real IE8. In all other current browsers it works fine, include in IE11 and emulated IE9 and 10. The code, you can see in my codepen example isn't complex. What I made wrong or is it impossible in connection with IE8? Thanks for information to this problem. Best regards. Tilo
  15. Is it possibe to scale a div with TweenMax but I would like to maintain or reset the CSS top and left position? Below are a few failed attempts. It seems TweenMax always scales from the center point. TweenMax.fromTo('#div-name', 2, {scaleX:.5, scaleY:.5}, {css:{top:0, left:0}}); or TweenMax.to('#div-name', 2, {scaleX:.5, scaleY:.5}); $("#div-name").css({ top: '0px', left: '0px' }); The Codepen URL shows the red div scaling but not maintaining the top: 0 and left: 0 desired position.
  16. Hey all, I was hoping someone could help with an issue I am having on tweening scale of a div that has a background image. The problem is that at the last moment the graphic snaps to this ugly blurred version. It looks good all up until that last moment. Does anyone have suggestions on how to handle or how to produce best experience? You can see super simple demo here(check view source, js/css is coded in html header): http://mistersaisho.com/rae/scaleTest/test.html They both have mousexover/mousexout listeners that adjust scale. Over it goes to 100% and out it goes to 80%. Top is effecting background-image and bottom is doing strait scale. I was thinking swapping with another image after the ween that would be at the smaller size though 100% however, I am trying to save as much k weight as possible. Thanks! **HAHAHAHA - I just got this error when submitting "Sorry, an error has occurred. Your topic contains the following suspected spam word, SExO" and it was because mousexover and mousexout(without x) were the issue
  17. I've looked around this website and the internet at large for a little help, but I'm not sure I'm even searching for the correct thing. The problem I'm having is that the scale attribute, as it's applied inside a TweenMax.to( ), seems to stutter to the point of essentially skipping the animation to the final frame in IE9. Unfortunately the deployment environment I'm working with is Windows 7 with IE9 strictly, so my options are limited. I believe GSAP works fine in IE9 -- all of the animations work pretty much as expected on this website's showcase animations. Here's how I have my setup: 1. The page is framed by the Twitter Bootstrap Framework 2. Other scripts exist alongside GSAP: jQuery most notably. 3. The calls to TweenMax.to( ) are being made sequentially with a timed delay rather than being a part of a timeline. Most of the animations do not run over one another. Things I've tried: 1. Changing the scale value to "msTransform":"scale(1.4,1.4)" seems to have no effect -- no effect at all that is, scale no longer happens at all. I assume the value scale:1.4 makes the call to the proprietary values anyway. 2. Removing and manipulating animations around this one to isolate it as the singular animation. This exact effect was also happening with a translation when using x and y but was corrected by using left and top. Not sure if that helps determine what I might be doing wrong. I have a feeling it's not directly GSAP related but thought I might find some insight here over what could be causing the problem.
  18. Hello, My question with this example : http://codepen.io/NicolasJ/pen/umFdy How to ensure that when "Center" is unchecked and click on the button "DO IT 2" the red block is positioned correctly. That is to say that the two upper corners are aligned and the result is displayed [t = 0 | b = 290 | l = 0 | r = 50] and not [55 t = | b = 235 | s = 55 | r = 5] How to ensure that when "Center" is checked and click on the "DO IT 3" button the red block is centered on the gray block? In summary, my question is how to properly calculate the sets of coordinates which I want to go in both cases (centered checked and unchecked) and keeping transformOrigin:"50% 50%". Hoping to be sufficiently clear Thanks
  19. I'm using GSAP's TweenMax to scale a div when a user clicks on a button. However, what I want to do is be able to get the current scale value and/or know how to increment the scale value by say 0.5. This is how I'm setting the scale when the button is click: TweenMax.to(mapContainer, 0.4, { scale: 1.3}); So scaled to 1.3 over 0.4 seconds. So what I'm wanting to do is when a user clicks on that button again, it will scale it by an extra 0.5 each time. I've also asked this on SO as well if you'd like to asnwer on there as well for the benefit of anyone looking aorund: http://stackoverflow.com/questions/24181307/how-to-get-scale-value-using-greensock-animation-platform-gsap Thanks!
  20. Hi everyone ! I got a problem with Firefox. I'm trying to scale dot with transformOrigin set as "center", like in the code below: TweenMax.to(flux, 0.15, {scale: "1", transformOrigin:"center", delay: delayFlux}); In Chrome, I don't get any problem, the dot scale up properly (first gif). But in Firefox, the dot does something weird like in the second gif. I've tried with transformOrigin: "50%" or "50% 50%" without success. Do you have any idea about that problem ?
  21. Hi guys, I have a simple tween that tweens the opacity and scale of an element. It's made up of a number of child divs, some with with background images TweenLite.fromTo(elm, 1, { scale: 0, opacity: 0 }, { delay: delay, scale: 1, opacity: 1, ease: Power4.easeInOut } ); Here's a video showing the problem. https://plus.google.com/photos/117519930315665299724/albums/6016203100500855073/6016203101346895106?pid=6016203101346895106&oid=117519930315665299724&authkey=CNaF7OT_gJGA1QE @0:01 - The above tween is run @0:04 - I run another tween which just returns the scale and opacity to 0 @0:10 - I set the elements display property to none @0:15 - I set the elements display property to block @0:19 - Tween scale and opacity to 0 @0:23 - Tween scale and opacity to 1 So at @0:15 it's rendered correctly. but again @0:23 is not again. I assume this is actually a browser issue, it doesn't think i needs to redraw the element after the scaling. The odd thing is though that if I only ever scale from .5 instead of 0 then there are no rendering issues. TweenLite.fromTo(@elm, 1, { scale: .5, opacity: 0 }, { delay: delay, scale: 1, opacity: 1, ease: Power4.easeInOut } ); (it's all fine on chrome desktop)
  22. Hello, Is someone tried to extend "Draggable" to make it possible to use the multi-touch and so with two fingers simultaneously rotate, scale and move an object ? This is a general question but I did not really find an answer on the forum. Before leaving for prototyping I'm not sure this is possible. Is someone has any feedback on this point ?
  23. Example : http://codepen.io/anon/pen/dnuCJ?editors=001 Premise : We have a draggable grid that may be larger than the user's current viewport. When they start to drag, we are scaling the draggable area to fit in their viewport, and scaling back out when they are done. The Problem : Greensock draggable watches deltas in the pointer X / Y position to determine dragging. This means that... 1) On the initial scale the pointer becomes detached from the draggable element. 2) Pointer x/y deltas do not account for the scaled content, so it ends up feeling like there is a drag resistance when there is not. The more the content is scaled, the more exaggerated this becomes. Desired Outcome : 1) As the content scales, the x,y position of the draggable element is changed so that it remains underneath the pointer. 2) Pointer deltas are divided by scale so that there is no feeling of drag resistance. I've been exploring this but cannot come up with a good comprehensive solution, especially for the first problem. For the second point, I am actually able to set a negative dragResistance dragResistance = 1 - 1/scale but it feels awkward when the pointer is detached from the draggable element. Any sugestions are welcome! Thanks, Erin
  24. I am trying to have an element scale on mouseover but the div and the text inside is pixelated. I can't figure out why... http://codepen.io/dchadney/pen/BnlFi
  25. Hi, I'm trying to create a similar website to http://www.nouvelleoctavia.fr whereby as you scroll the content and imagery increase in size, fade in and fade out as if you are passing through it. I'm a newbie to GreenSock and I am having trouble understanding how it works. I'm currently trying to get a simple coloured div rectangle that is in the centre of the screen to increase and "pass through" as I scroll but it is not working. Any help would be most appreciated in getting me started. Thanks