Search the Community
Showing results for 'resize' in content posted in GSAP.
Found 2,341 results
-
Hi and welcome to the GreenSock forums. Here is a basic example of infinitely repeating clouds: http://codepen.io/GreenSock/pen/drCFD Each cloud is dynamically generated, positioned and placed in a TimelineMax that repeats. For extra flavor I place each cloud's timeline inside another timeline so that all the clouds can be paused, reversed or played very easily. Since I am animating the clouds left property to 100% you will also note that you can resize the browser window and the animation continues to work fine. I commented each line of code. Let us know if you need more help or explanation.
-
Hey Guys, I'm using the Draggable component in a horizontal list view that is responsive. Here's an early prototype http://lab.harrynorthover.com/timeline/. As you can see in the prototype, the content above the draggable component is responsive and will resize down to 640 pixels. The issue I am having is how to scale down the scrubber at the same time. Is there a way to adjust the translate3d values through Draggable so the scrubber scales down at the same pace? I've tried scaling down the width of the scrubber or applying a negative margin left but then the drag amount becomes offset/incorrect. Is there a way to refresh the Draggable component, or scale the values down to it keeps in proportion with the rest of the content? What's the best practice for tackling resizing issues like this with Draggable? Also, is there a way to invert the direction of the dragging? So the timeline moves in the opposite direction? This is an excellent component by the way! Thanks, Harry.
-
Hi Harry and welcome to the forums, One chance could be to create the draggable instance through a function that you could execute on DOM ready or window.onload With that function you can get the draggable element's parent new width and apply to the bound variable: var parent = $("div#scrubberParent"), scrubber = $("div#scrubber"); fucnction createDraggable() { Draggable.create(scrubber, { type:'x', bounds:parent }) } So with a resize event you can call that function again and reset the draggable element's bounds. Jack in this case, creating the draggable instance more than once, is there garbage collection or overwriting for the previous instance? Hope this helps, Rodrigo.
-
hi, You could store that value in a general scope variable and for orientation changes you can use a resize event in order to change that value to the current one. Hope this helps, Cheers, Rodrigo.
-
Hi. I have recently begun redesigning my website at http://www.kurrent.com from Flash to HTML5. I am using the JS GSAP v1.9.7. My beta site is at http://www.kurrent.com/htmlsite. I tested on Firefox and Safari on the Mac with good results. It also runs fine in Safari on the iPad1, but it doesn't work in the Safari browser on iPad2. The page loads and the rectangles resize, but that's it. I've looked through the forums and am still scratching my head at this one. Thanks in advance for the help! Kurt
-
Thanks for all the explanations. I kind of feel bad that I'm taking up so much of your time that you could spend on more productive ventures. I agree with you completely in terms of performance, and I'm fully understanding you. And I agree gsap performs as desired for common use cases. I wouldn't want to change this default behavior, especially as you've explained it. I do believe a future "clear/forget element" function would be a good addition, and would also add that this is kind of what I'd expect clearProps to do. But I understand that's a cssPlugin feature, so it affects the scope of that plugin, but would expect a tweenlite counterpart. Someone recognized the need for it, so it's a matter of consistency. But personally I don't even need it, as you've given me plenty of information to create it myself, thanks. I know my needs might not seem common, but I assure you they're practical. I'm not sure if you understood what I'm doing. For a casual javascript user who wants to make a banner animation using CSS transforms, gsap makes it a breeze with entry level skills. But doing a fullscreen animation on a responsive width website becomes a maze of calculations on top of calculations to give a consistent look. This is the problem I'm solving. You just wrap your a-z animation in a function using a simple API for creating any dom element using relative sizing and placement, and the plugin automatically handles resizing it so it's identical at any size, with the added benefit of cool out of the box animations included. Recreating the timeline is simple and fast, but recreating the dom elements on each resize would be horribly slow, therefore I have to recycle and reset those elements. Hence, this is a very practical use case. Thanks for all the help, I got what I need to finish it
-
What kills me is that I have a much larger animation and much more robust version of the tool in that codepen. With text, images, tons of layers, complex animations, and the tools to manipulate them easily... After the resize, just about the whole animation seems to look fine, except the layer rotation no longer works, but everything else looks fine! I hope someone can spot a problem...
-
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?
-
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.
-
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.
-
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)
