Jump to content
Search Community

Search the Community

Showing results for tags 'scaling'.

  • 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. Hi guys, this won't be explicitly a gsap question I think, or maybe a gsap solution exists. I've already searched on the forum and have read a lot of topics about responsive, scaling,... But didn' found a solution that worked for my problem. I did a whole campaign of banners and now the media agency comes back to me complaining "it's not responsive" but from what I understand they need banners that scales down when needed and keep it's proportions. So for example I have a 970x250 format but they also want to use it for mobile and it must scale if the desktop browser gets smaller than 970 width... I thought they where using an iframe with a content scaling but no it's js injection or something like that that I don't know, I'm really not a js genius... So I need to quickly adapt a whole campaign to that need, I made a codepen of a typical banner as I'm used to do. I'm trying to find out how to scale this banner when browser/mobile gets smaller, any idea ? https://codepen.io/fripi/pen/QWPXEeL
  2. Hi All.. I am new to GSAP and investigating whether GSAP is the right tool/platform for a PoC I am building (vs. using Anime.js, Pixi.js, D3.js, other). Here is the use case: Initialize a rectangular canvas with a variable but large number of tweens (i.e. 30,000). All of the tweens begin on the left edge of the canvas and are distributed vertically from top to bottom, evenly. GSAP will animate the tweens along a fixed path from the left edge of the canvas to the right edge. The path contains multiple fixed segments (i.e. 9 segments) that each of the tweens will follow. Each of the tweens will have different durations for each of those segments before finishing at the right edge of the canvas. The tweens can certainly be very small and the canvas can grow tall enough to accommodate all of the 30K tweens (top to bottom) You can assuming the data for each tween is available (can be all hardcoded for now but will eventually be retrieved via Web Service API) I created the following codepen (http://codepen.io/angecles/pen/apopOm) which shows the concept in action with just 10 tweens. Any support from this group would be appreciated!
  3. Can anyone give me any tips to reduce jittery animation when scaling or tweening short distances with Tweenlite? I've tried force3d:true, and z:00000.1 to try to force hardware acceleration, but didnt seem to work. Thanks!
  4. Hi. I created a simple SVG witch is nothing more than a black rectangle that covers the screen and a transparent circle in the middle. Its purpose is to give the appearance of zooming in/out on the image behind it, thereby blocking out the image except for what is seen through the transparent circle. The above code works fine when I am scaling up, then down, in one motion. However, when I am only wanting to scale down, to draw the circle to the center of the screen, the code behaves in a hap-hazard way. The black rectangle scales improperly. I have tried different approaches, like using opacity zero when scaling-up, then switching to opacity 1 to show the effect, but the result is always the same. If you uncomment the line of js code, you'll see what I am getting. Please have a look at my pen (my first, owing to the demo you provided :0) Note: the pen that is embedded is not running correctly. But does so when I paste the url into the browser. https://codepen.io/don199/pen/wbdgQv
  5. Hello, When I try to scale with a small amount (between 1.0 and 1.09) the font really becomes blurry. I have tried looking for a solution, but none of them work. Examples: backface-visibility: hidden; transform: translateZ(0); -webkit-font-smoothing: subpixel-antialiased; -webkit-filter: blur(0); TweenMax.set('#button', {rotation:0.01, transformStyle:"preserve-3d"}); In my codepen you can see a example (viewed in Google Chrome).
  6. Hi everyone, Noob issue here I imagine, but it appears my SVG is overflowing it's 'bounding box' while scaling... I've searched online and can't seem to find anyone with a similar issue. Any ideas what I'm doing wrong? Thanks
  7. Looks like scaling and will-change issues have been fixed in v59 of Chrome. No more rasterization at a low scale, or jumping at the end of a transform. And using will-change can provide a nice performance boost. Compare the CPU usage between these two demos. In the demo above, you should notice the CPU rise as the image gets larger. This is because it creates a new raster every time the scale changes, so the larger the image, the more the CPU has to work. In the demo below, the CPU usage should be relatively flat as it will use the same raster throughout the animation. While this may improve performance, the overall quality may not look as good, particularly at lower scale levels. EDIT: This is only for graphics. Scaling text is still an issue.
  8. Hi, I'm brand new to GSAP. Learning a lot. I want to, at the same time, scale up and cross-dissolve two images when the user clicks on the first state of the image. I did this similar effect with JS and CSS here: http://bigbendhc.org/theUplink/karane-health-care-administration/ -mouseover or click on the arrow below his face. =================== Now I'm trying to do this effect using GSAP. I have scaled up the first state image up by doing this: ...But now I want to cross dissolve from myImage_state1 to myImage_state2 while the images are scaling up. Seems simple but not sure how to fit that into the function. Thanks much!
  9. Hi guys, I want to make an 'endless' list that is draggable. Each list element needs to snap in the center of the screen. I got those parts working with throwprops' snaps and a proxy element. Now the whole thing also needs to be zoomable. That works too, but the snapping stops working when zoomed out. I can't figure out what parts I have to scale myself and what parts TweenMax scales for me. I set up this pen, im sure you will get where I want this to go: http://codepen.io/mbuesing/pen/XNRrog I put a green line in the center so you can easily see when an element is centered. The center of the element in the middle should always line up with the green line. In zoomed out mode that doesn't work. The calculated offsets are shifted. I suspect it has to do with the update function, in line 60 i subtract the double list width, but that isn't updated to the new zoomed out size. If I do changed it to that, the list will be in a wrong position after the zooming animation. Any ideas? Thanks Moriz
  10. Hi all, I have a very specific situation, where the display objects have an original scaling factor NOT equal to 1 (for example, 0.5, or 0.3333). I am trying to achieve the effect of relative scaling on it. I am aware of the syntax of "+=" and "-=" for relative values. However, since this is scaling we are talking about, it might be a little different. Let me explain. For example, i want to scale the object by a factor of 4, that means i would like the object's dimensions to x4. So if the object is originally 50x50, it will be 200x200. Problem is, if the original scale factor is not 1, and instead is something, say, 0.5, then scale to 4 will in fact increase the object's dimension by 8 times, hence making it 400x400. In a more straightforward example, if i scale it to 1, the object will effectively scale up twice its current dimension to 100x100, where as logically, scaling by 1 should have no effect. i have thought of maybe using "*=", since we're dealing with factors and multiplications. but it doesn't seem to be a valid syntax, and it would also suffer problems when i'm trying to shrink the image back down to its original size. So i guess my question is, is it possible to scale relatively in my situation? Thank you for your help!
  11. Has anyone else noticed jerkyness in scaling since chrome updated from 48 to 49 a few days ago?
  12. Hi guys, I am working on a banner animation that involves scaling 2 images (placeholders) at the same time in a sort of parallax effect: http://codepen.io/dada78/pen/ffb31fe839a80e3e8f4826561bd3f691 It animates smoothly in webkit and mozilla but stutters (a lot) in IE10 and 11. ANY clues how to solve this at all? Thanks!
  13. Hello! A new project has brought me to GSAP and I'm starting to wrap my head around what's possible, how to do things, etc. Please forgive me as I fumble my way through this… Rather unsurprisingly, I've stumbled into a wall with regard to the first animation this project requires, which can be described as scaling a huge svg by a large number … but perhaps it's better to link straight to a demo page. Forgive me for not using CodePen—they have a file-size limit and this demo exceeds it: https://jsfiddle.net/163eys6b/7/ Give your browser a little extra time to process that page; like I said, the SVG is huge. The project calls for a big map of (almost) the entire world which starts zoomed all the way in to Amsterdam, which then slowly zooms out all of the way, from scale:1600 to scale:1. In the above JS Fiddle, you'll notice that it does what it should do, but it does it with a stutter (I'm using the latest version of Chrome stable as I type this, version 47.0.2526.111). I can remove the stutter by removing force3D:false, but that results in a very blurry experience about 5 seconds after the zoom-out animation begins. Am I doing this right? Or, is this SVG + scale combination just too much for the browser to handle comfortably? Thanks for your time!
  14. Just finished making these two short codepens to demonstrate. This Draggable has a separate drag handle for the drag item, and on release it scales the entire drag item up. If you click on the handle while it's scaled up, I want the item to shrink back to it's normal size only while you are dragging. However, I can't figure out how to make it stay under your mouse where you actually clicked the handle. codepen 1 - instantly scale-down: http://codepen.io/anon/pen/VerJdJ codepen 2 - animate scale-down (this is what i would prefer if possible): http://codepen.io/anon/pen/JGOQYZ I thought maybe while scaling, if I could change the transform origin to where the mouse pointer is that would fix it, but unfortunately there are other coordinates in the application that rely on the transformOrigin being 50%, 50%. Is there a way to do this? Outcome: 1.) The item shrinks but is no longer under your mouse pointer. Even attempting to relocate it manually seems wonky (see codepen and other things I have tried below) Expected Outcome: 1.) the item shrinks and remains attached at the same offset to the mouse (appearing to scale at your mouse point, as if your mouse point were the origin) Things I have tried: 1.) in the onDragPress, I attempted to get the the mouse coordinates within the drag target's container and instantly relocate the item to those coordinates. That results in bazaar behavior. 2.) I've attempted calling myDraggable.update() before and during setting the scalethe scale animation, and onDragMove Any help is appreciated, thanks a lot in advance! Also, let me say: TimelineLite and TweenLite are some of the most incredible libraries I've used. Pushing my company to purchase a member license.
  15. Can anyone point me to a tutorial or codepen demo that shows how to make an entire Greensock project in a div scale uniformly on a resize or load event, preserving aspect ratio and relative positions of all elements within a container div? I've used Greensock within Edge Animate, and it works well. However, when building a GSAP project from scratch within a container div on a web page, nested elements do not scale with the parent container. I'm looking for the most efficient approach for achieving this.
  16. Does anyone know why when animating the scale of an svg, it gets blurry in IE, and only looks clear in Chrome and Safari once the animation has finished? In this quick test (http://www.brendyn.com/test/) the top image is SVG and the bottom is a PNG. If looked at in IE, once it gets big, you can see it's very blurry, which an SVG shouldnt be. The PNG is only slightly blurry (which is expected). I assume it's a core browser difference, but I would have assumed TweenLite would have taken care of that. Can anyone offer any insight? Thanks very much in advance.
  17. I've got this scene where a scale and transform-origin are being used together. On Safari the effect never takes places and I know of a hacky way to fix this, but wondering what a better solution would be? Here is the code I'm discussing. tl.to(worm, 1, { scale: 1, transformOrigin: 'bottom center' });
  18. I'm trying to scale an image down from 200% to 100% to the center of a div. First I used the image as the background of the div, simply animating the backgroundSize with background-position: center;. This worked, but caused the image to heavily stutter during the animation in both Chrome and FF at least. I then created a workaround and setting the initial image width and height to double the original size and setting the left: -25%; (also tried using translate() for this). .windmolens { position: absolute; left: -277px; top: -40px; width: 1108px; /* original image size is half of this */ height: 160px; /* original image size is half of this */ } NuonTl.to(background, 3.5, {width: "554px", height: "80px", left: 0, top: 0}) Result: http://comheroes.nl/nuonbanners/728x90/ With this code I have the stuttering in Chrome, FF and IE11. There's no stuttering if I leave out the positioning (left, top animation).. Any tips?
  19. I am using GSAP along with a ScrollMagic plugin to time my animations using the user scroll. Everything works great on desktop, animations are smooth and look nice. But when I load the site on tablet and mobile issues start to show up. I have an iPad and a Galaxy S4, and the galaxy is performing much better than the iPad is. On scroll for the Galaxy there is a short jump at the start, past that the animations are a bit slow but work in general. When it comes to the iPad, the animations are nonexistant... on scroll everything locks up and moves for the scroll, then it seems to reload and moves everything to where they should be instantly. There is no tweening or easing happening and creates a very poor experience on tablet. Im looking for a way to improve performence on mobile / tablet and allow tweening and easing to happen at all on tablet. Thank you
  20. 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!
  21. I have got this snippet of gsap code working pretty well to adapt my 1280x768 webgame to almost any mobile viewport size. It's not perfect, but I think it's pretty close. I'm looking for any constructive advice or ways to improve this method as adapting viewport sizes is kind of a pain. // disable all mobile dragging of webpage $("html").on("touchmove", function(e){ // only disable dragging of html element if(e.target===this){ e.preventDefault(); } }); // make html page scaling originate from top-left corner TweenMax.set("html", { transformOrigin:"0 0" }); function resizeWindow(){ var w=window.innerWidth; var h=window.innerHeight; // width less than 1280? if(w<1280){ TweenMax.set("html",{scaleX:w/1280}); }else{ TweenMax.set("html",{scaleX:1}); } // height less than 768? if(h<768){ TweenMax.set("html",{scaleY:h/768}); }else{ TweenMax.set("html",{scaleY:1}); } } $(window).on("resize", function(){ // only do this for mobile devices if(isMobile===true){ // do not resize if focusing on an input or the keyboard will squish the whole webpage if(inputFocus===false){ resizeWindow(); } } });
  22. I have made an image slider for a site I am working on but thought it works in the other major brwosers it is jumpy in IE. You can see it in action here http://handrailcreations.co.uk/ function startAnimate(object) { var tl1 = new TimelineMax(), slideImg = jQuery('#inner-header').innerWidth(), slideImgH = jQuery('#inner-header').innerHeight(), slideF = slideImg/26, slideH = slideImgH/26, leftMove = Math.floor((Math.random()*3))* slideF - slideF, topMove = Math.floor((Math.random()*3))* slideH - slideH, left = leftMove.toFixed(0), top = topMove.toFixed(0); //alert(top); tl1.to(object, 1, {autoAlpha:1}, 'zoom') .to(object, 10, {scale:1.1, ease:Linear.easeNone}, 'zoom') .to(object, 10, {x: left , y:top, force3D:true, ease:Linear.easeNone}, 'zoom') .to(object, 1, {autoAlpha:0}) .to(object, 0, {scale:1, x:0, y:0, onComplete: endAnimation, onCompleteParams: [object], ease:Linear.easeNone}); } Any ideas? Thanks in advance
  23. hi, i'm having a problem when using draggable and then scaling objects with css transforms: everything works fine so far, but the scaled div gets blurry after scaling. first i thought it's a browser problem, but when leaving draggable away, the rendering works as expected and the div's text looks sharp again, no matter what scaling factor is used. when using draggable, it seems to me, that the browser treats the scaled object as an image... maybe there's the possibility to force the browser to re-render? would be nice if there's any workaround ;-p thanks! michael
  24. Is it possible to turn on the handles and outline of an object without clicking on it? I'm adding objects to the stage dynamically, and I'd like to turn the cages on when they are added.
  25. I'm using TweenLite to scale a wrapper div to fit a user's window. Everything looks and functions well, except in IE8 there is an unusual issue with Text Inputs. When clicked inside to enter text, the blinking caret appears offset, yet the entered text still displays in the correct position. The offset seems proportional to the amount the wrapper div was scaled. Thanks in advance for any help!
  • Create New...