Search the Community
Showing results for 'resize' in content posted in GSAP.
Found 2,315 results
-
At the moment I'm trying to build a resizing tool for a banner animation. The animation contains hundreds of elements, created with jQuery on the fly. So after a screen resize, it's very costly to remove all the elements and remake them again with new dimensions. So the idea is: I changed my building function to not create new elements if they already exist, using ID's and a counter to check. But my building function still set's their dimensions and positioning by swapping the existing element into the same function in place of a newly created element. So, to resize: resize(width,height,callback,tl) Which will seek(0) the animation to reset everything, empty the timeline, resize the container, run the callback which rebuilds the animation, and then play it from it's prior playhead position. BUT: it's not working at all. If I pause it before rebuilding, and inspect the elements in Firebug, they are littered with transforms even after doing seek(0). So playing it runs a new animation on pre-transformed elements, and it's a big mess. I can't seem to reset the damn things. And I'm assuming that it's because the FROM tweens are immediateRender:true, so after doing a seek(0), they are immediately in their "from" positions. I need immediateRender:true set, it's not an option to turn it off. So how can I put the elements back in place without destroying and rebuilding?
-
Hi, I'm having some problems using matrix3d and borderRadius. You can fine a fiddle here: http://jsfiddle.net/wasabit/KvDEr/ If you run the fiddle on Chrome, the borderRadius animation isn't rendered (if you resize the browser window, the borderRadius become correct). > if you comment "left:300" in the tweenmax call, the borderRadius animation works > if you comment -webkit-transform:matrix3d..., the borderRadius animation works I know this is not the perfect example (the original script is more complex), but I tried to make it understandable. Hope someone can help. Kind regards
-
This is tricky because you've got over 1,000 lines of code in your example and it would take quite a while to wrap our heads around what every line does, how they all interact, what potential conflicts there are, what your intent was, how the other tools factor in (like jQuery), etc. In these forums, we really need to stay focused on questions directly related to GreenSock-tools in isolated examples whereas what you're asking for here is more of a full-fledged consulting project for troubleshooting a specific application. We do offer consulting services for a fee, so let us know if that's what you need (we can address that over a PM or e-mail). That being said, I did look around at your example and noticed some intermittent HUGE repaint costs in Chrome. The core problem here (from what I discerned) wasn't that the engine itself was slowing down or misfiring - it was that there were intermittent huge gaps in the ticker updates. Normally, the browser hits the ticker 60 times per second, resulting in smooth updates. However, in your example, sometimes the browser was so overwhelmed with some other task (like a repaint and/or image decode) that a gap was introduced, thus the ticker didn't get a requestAnimationFrame or setTimeout callback for literally 0.5 or 1 second (or more, depending on the CPU power). So when GSAP was told to update, it correctly rendered things at that (new) time and things looked like they "jumped". Remember, GSAP is time-based, not frame-based. That's a GOOD thing. It honors the duration of tweens in terms of time, so that if there are gaps in the ticker updates due to CPU load, it won't just slow everything down and make them look like they're going in slow-motion like a frames-based system would. I've attached a screen capture showing a huge repaint time when I rolled over one of the dots/icons. It looks like Chrome is spending a massive amount of time decoding a png. See the large green bar? That's repaint. The orange bars are JavaScript execution (that's what GSAP does). Notice performance for JS is rock solid and very fast. I'd recommend looking into why your repaint costs are so high and optimize that. Tip: Don't make the browser resize your images if at all possible because Chrome prioritizes image quality over performance, thus repaint times can be very large in Chrome for image resizes.
-
Hi everybody, for a personal project I would like to build an oblique progress bar. So, my first question is: Is there a way to create dynamically and easily a Line object with Tweenmax.js? For the moment I just resize the width of a rectangle shape like this : http://jsfiddle.net/FracArt/6GJ67/2/ Which actually works! But seems a bit "hacky". Second question, as you can notice on the jsfiddle file I tried to build an oblique progress bar on the same principle. However, when I rotate the rectangle a gap appears between the initial and final position of the bar. So do you have an idea of how I can correct that without doing some geometry calculations? (maybe a transform-origin property on the css?)
-
Hello, I am trying to achieve an animated mask that hides and reveals portions of ImageA over ImageB. I have achieved this but there is some jitter with ImageA. All overflow is set to 'hide'. I had to have a div that is rotated, put an image in that and rotate it the opposite way so the image doesn't appear rotated. If I resize the div, the image slides out of position. If I change the "left" value for the div, the image moves with it (as it should). I have tweens to counter these slides and this is what is causing the jitter. I have the source up and an illustration (at the bottom of the source) showing how I rotated a div and have ImageA counter-rotated inside of it. There is a black box at the top of the example screen that lets you scrub the timeline to view it again. http://morning-eyrie....herokuapp.com/ http://morning-eyrie...com/source.html Is there a better way to do this? Should I be using canvas instead?
-
I'm new to browser-based animation, having come from a Flash/Actionscript background. It's becoming obvious to me that I'm going to need a LOT of help! So... I'm building a relatively complex animation site using a combination of jQuery and Greensock (thank god for Greensock!). It works fine in all the browsers I'm targeting except IE8, which the client insists upon. Most of the problems have to do with scaling and opacity. I'm working on them one at a time. Scaling first. Here is a simple page where the image needs to fill the browser window at all times without losing its aspect ratio. In this instance, the image needs to be in an img tag in a nested div tag. Scale and Resize Test (image should fill window at all times without distortion) http://www.poddesign.com/skidmore/beta/v2_ie8/scaletest.html I have a sizing function triggered by $(window).resize that uses TweenMax.set(target, {scale: dynamic_variable}); where the dynamic variable is calculated from the window height and width and the content height and width. It works everywhere but IE8. Can you look at it and tell me why it isn't scaling at all in IE8? I thought Greensock TweenMax was performing cross-browser calculations under the hood, so that the scale property would translate to an MSFilter (or whatever it does...) *If you want to see a working version of the site on browsers other than IE8 (to see what I'm ultimately trying to do; the screens need to fill the browser), try this beta link — http://www.poddesign.com/skidmore/beta/v2/
-
I was wondering about the best way to handle a jQuery resize event when a user resizes the browser window. I am using TimelineMax and currently I am pausing the timeline, moving it to the very start of the timeline and then removing the timeline object, initializing a new one and rebuilding the timeline each time the browser resize event is fired. I was thinking there might be a better way to do this. I found this answer on StackOverflow here. Having said that, this solution works, but it moves the timeline to the start every time. If I try and resize the window and pause the timeline at the current time of the label it gets thrown off? If I simply try and remove the timeline and rebuild it with a new object, it gets thrown off also? I had seen something about a liquid stage? Is this available on the JS version, or maybe there is something I am overlooking? Here's my resize code: $window.on('resize', function(){ var time = 0; if(globalLabel != "") time = controller.tl.getLabelTime(globalLabel); //time would be used to pause the timeline but it does not work clearTimeout(id); controller.tl.pause(0,true); controller.tl.remove(); //on the Update view call, I am creating a new timeline object //and rebuilding the timeline id = setTimeout(controller.UpdateView, 150); }); I appreciate any help.
-
Any thoughts, really would be appreciated. If anyone can look at my code and please tell me if I'm doing anything glaringly wrong... Especially the .html files (I'm not sure if I'm implementing things in the right order or most efficient manner etc... ) Specifically the Ticker function (I tried to use the TweenLite Ticker as I read it may perform better than the createJS Ticker, but couldn't get it to work..) and the resize bit, doesn't center in some browsers... any ideas?? Don't be afraid to tear it all to shreds everyone, please I am looking for honest criticism and assistance here folks. Thanks!
-
Again I apologize for the english, I'm using Google Translate. I'm having a problem with an img object, I'm animating it with rotateX, is working perfectly. But when it animates, is set to top his property, and he lines up in my website is at bottom. So when you resize the window, it does not follow the footer and the layout misalignment. How can I solve this? I'm using: TweenMax.from(cenario_rodape, 0.5, { css:{ rotationX:-90, transformOrigin:"center bottom" }, ease:Back.easeOut }) Thank you.
-
Tween and resize animation like http://fff.cmiscm.com
dangreensock replied to dangreensock's topic in GSAP
Doh! The title should be 'Skew and resize' not 'Tween and resize. I'm pretty sure it's not a tween. -
Hi, I came across GreenSock whilst trying to figure out how the wonderful Form Follows Function website works (http://fff.cmiscm.com). When you visit that site and click one of the colourful boxes, the box animates by 'wiggling' larger with a kind of skew effect. I wonder if this is something that GreenSock does out of the box, or if it's something that would be difficult to acheive. Basically, any pointers on where to start in reproducing a similar effect would be very much welcome - I have no idea where to start! By the way, I'm so glad I came across GreenSock and it's baffling that I've not come across it before - it looks absolutely awesome! Many thanks folks.
-
Just wanted to give an update. After a cursory glance at the specifics of canvas and determining that previous versions of IE don't support its use, I shelved the idea. The site this is being developed for is required to support >=IE7. I spent a bit of time working with a PHP/GD proxy to return resized images, and while this works pretty well for a static sized viewport, it suffers in a liquid layout. I've identified the issue as being a result of a WebKit "feature" instead of a bug. The algorithm used by webkit to resize images, while slow, results in a higher quality image. It appears that somewhere down the line a decision was made to favor look over performance. I will continue to look for viable solutions, but wanted to thank you both again for your assistance.
-
Well I've had an enlightening 24 hours looking into this. And when I say "enlightening", I mean nightmarish Safari in iOS is absolutely craptastic. And Steve Jobs ripped Flash for being buggy? Who's the pot and who's the kettle? Anyway, here are my findings... First, I'll mention the bugs in Safari for iOS: Changes to "top" or "left" properties are completely ignored if they're made at the same time as changes to any transform property like rotation, scale, skew, x, y, etc. (how the heck could Apple miss that?!). However, if you set -webkit-perspective to a non-zero value, it fixes this bug. I described the issue and provided proof with sample code in this post: http://forums.greens...3112#entry23112 The display often doesn't get repainted properly after transform changes are made until you scroll (or sometimes tap a link). The properties are set correctly, but it's like the screen doesn't show it until you scroll to kick-start the renderer. Again, setting a non-zero -webkit-perspective solves this problem. If you define a -webkit-perspective on an element, it causes random flickers when you resize that element, particularly one with a background-image. So the fix for the first 2 actually causes the 3rd bug! After tons of hacking, I discovered one recipe that seems to resolve all of the issues above. Set -webkit-backface-visibility to "hidden" AND make sure z-index is set to some number (doesn't really matter as long as it's not blank). Of course most people will have no idea that they need to implement these styles to avoid Safari bugs, so the latest version of CSSPlugin (which is also inside TweenMax) automatically does it for you. For Safari (only), when you make some sort of transform change (like rotation, x, y, scale, or skew), it will ensure that -webkit-backface-visibility and z-index are set. Please download the latest version and give it a shot.
-
Hey so i'm not sure if this is a greensock bug or a browser bug or me just pushing the limits too much, but what i have noticed on a couple projects i've started lately is that where i may have a bunch of tweens going on successfully in Chrome or Firefox, that when i test in Safari or on my iPhone, the animations dont seem to fully update visually. if i resize the window or anything like that, the screen corrects itself. where i've run into it, the problem doen'st happen if only 1 or two things are tweening at once, but if a more than a handful are tweening at once, it seems that the browser cant keep up or something. if you zoom in or out or rotate the screen or something to get the browser to react, the end of the animation will rectify itself after its been messed up. even with the window resize listener turned off. you can check out one project currently in progress where you can view this. to see them problem, in safari or on iphone open the link, then click between "bird" and "big bang". you will see that the divs and the nav elements will linger in Safari and iOS, yet not in Firefox or Chrome. if you step across the nav one at a time, (big bang, liquid, snakes, globe, wedges, candle, bird...) then it tweens fine in all browsers. http://danehansen.com/temp/gs
-
Hi, is the js greensock tool have a script similar to AutoFitArea? I'm placing a lot of div's in html and sometimes to make it more fluid i used percentage to position them instead of pixels. Soooo, when user resize the stage (minimize it), all div's position get awkward. By the way, just a suggestion, i think there should also be a forum where people (beginner's like me ) can talk about other stuff but still related to greensock like html, php, and stuff so people can share their experience combining various scripting language with greensock (just a suggestion)
