Search the Community
Showing results for 'resize' in content posted in GSAP.
Found 2,326 results
-
Yep, disable() is all you need. Is that not working for you or something? Also, could you provide a very simple codpen or jsfiddle that demonstrates the odd behavior after a window resize?
-
i want to ask an additonal question to this topic please! i write a small interface script: http://tvim.de/scrollto/scrollto.html it works brillant! Thanks to Greensock Team! But when i resize the window, it has problems centering my divs. without greensock there are no position problems. i think its because greensock uses "px" values to calculate scrollTo destinations. but can i have them with percentage? i tried it but it does not work: TweenLite.to(scrollsrc, 1.5, {scrollTo:{y:"30%", x:"30%"}, ease:Power4.easeInOut});
-
Concatenating a relative percentage value for tweening
Gary Horsman replied to Gary Horsman's topic in GSAP
The viewport container for the slides is actually 100% the width of the browser window, so there is no specified pixel width. If it were in pixels, my problem would be solved! Each slide is 1/6 (or about 16.66667%) of the slide container, and that slide container is 600% of its parent container which acts like a viewport with a scrolling overflow and THAT viewport is the one that's 100% of the browser window. So everything has to resize inside a liquid layout. That's what the client has requested. Yes, the slides are moving only on the x-axis. Unfortunately, I've never set up a codepen or jsfiddle page, though the link in my last post is a codepen page. But I'm thinking the solution offered there is a much more elegant solution to making the proper conversion between percentages and pixels than my little disaster If it works, I'll post the solution adapted to my situation. -
You're right, the resizing you describe is not a built-in functionality provided by GSAP Draggable. If you take a look at this codepen, you can see a method that gets GSAP Draggable and jQueryUI Resizable working together. The trick is in this line, that prevents the resize and drag from happening at the same time: $('.ui-resizable-handle').attr('data-clickable', true);
-
Jack, Thank you for the quick reply! Yes, so basically, what I had thought to test was if the a website/page was built using a responsive grid (i.e. Foundation, or Bootstrap), and when the user resizes their window the ".arrow-test-wrapper" (percentage base, say .row.column) would resize. So, I wondered if the bezier curve positions would alter themselves relative to that parent element. I assumed that the values would not take in a percentage, integers only?
-
Hi, I'm having trouble getting this to work, so I'm wondering if anyone can help? Basically, I'm creating a TimelineMax instance and populating it with some tweens. One of the tweens I'm using to set a div at exactly the window height and another at exactly 0 (cleaned up to make it more generic): tl.to(selectors.$myElement, 0, posObj({ display: 'block', y: $(window).height(), z: 0.001}), "myLabel"); The problem is that the div heights are being resized on browser resize, so that two divs stacked up on each other no longer butt up against each other. I tried approaching it by looping through the tl.getChildren, finding tweens with a "y" var, then updating that number with the new window height, but this doesn't seem to be working as expected. var updateTweens = function () { tl.getChildren().map(function ( item) { if(item.vars["y"]){ if(item.vars["y"]==windowHeight){ item.vars["y"]=$(window).height(); } } }); }; So is there a better way to accomplish this? Bear in mind that I have around 30 tweens to work with and when I tried to use the "tl.add(var myTween=new TweenMax(el, time, vars));" approach everything sort of broke. But any help is greatly appreciated.
-
Thanks for the help, but it's still not working exactly right. Following your example, I'm setting the "y" value right when the tween starts, and then resizing the browser and inspecting the results. So theoretically, if I resize without scrolling, tl.progress(0) ought to reset the y value immediately. castTween.updateTo( posObj({ y: $(window).height()})) ; The posObj function just does a few hacks for IE8 that aren't relevant here since they're not triggered. I then look in the debugger and I can see that the original height was around 440, and the new window height is indeed much higher (in this case around 650). I look in Firebug, and the results are still like this: <section id="cast-landing" style="display: block; top: 0.05px; transform: translate3d(0px, 444px, 0px);"> </section> So it's not updating that translate3d property at all. What am I missing?
-
Hi, It would be best if you could take some time to boil this down to just the key elements. We really only need to see code that: determines the final, centered position of the graphic in question animates the final graphic and if necessary the code that reloads the page on resize. Right now there are just too many variables and calculations to sort through and testing the animation requires us to watch things animate that aren't necessary and take time. The simpler the codepen is the quicker we can get to the bottom of the issue. Thanks!
-
Hi there, I'm new to GSAP. I'm doing my first build with it and am loving it. I am running in to a bit of a problem in regards to element placement and where they are defined with media queries. My app defines its animations and initializes them all on page load. This is working wonderfully for all my animations with the exception of the home page. The problem with this animation is I am currently using media queries to position an element based on browser viewport size, so certain elements don't overlap, etc. This works fine when the page is loaded for the first time. GSAP grabs the correct CSS offset and animates the element in via: animations.homeSection.from("#home-art", 0.75, {css:{opacity:0, left: -100}}, "homeart") The problem is, when this animation is initialized on page load, it grabs that CSS and sets it on the element in-line. Now if I resize the browser window, the element does not respond to the media queries and things overlap. I was trying to do some window.onresize things but have been largely unsuccessful at this point. If I manually set the css:left property of the element based on window sizing inside of a window onresize, when the page is reanimated, it reverts to the originally calculated position by GSAP. Is there any way around this? Thanks ahead of time.
-
Hi Jack, I checked it out and it does the job, awesome work! 2 remarks: - I update the dragResistance of each node at runtime by directly setting the .dragResistance property, is this the recommended way or is this 'hacky' (i.e. should there be a setter function)? - I actually needed a negative dragResistance because I decided to scale the contents down rather than up. I found out that setting it to -1 works to speed up the dragging by a factor 2. So it's fine by me, I'm happy it's supported in the first place, though it feels a bit unintuitive to put a negative number. A bit unrelated: What is the recommended way to scale the contents of a "scroll" without increasing the scroller itself? there are some unexpected things happening when I scale the contents of a "scroll" draggable using css transforms (i.e. the scale property). Because I don't want the draggable container itself to scale, I put everything in a wrapper div which I scale with TweenLite. However, zooming in and out (by multiple doubleclicks), the width of 'your' injected wrapper does not revert back, not even after disable and re-enable, hence the scrollable area is way too big. Also, this behavior is browser specific (on iPad it does resize itself back, on Chrome it doesn't). You can see this behavior if you doubleclick twice in the following example, and then pan to the right (there is a black area). Additionally, the edgeResistance at the bottom and right edge seem to reset to 1 in the process. http://codepen.io/ratchet/pen/Ihmgz (dragResistance obviously does not work in this example since the library is loaded from the cdn)
-
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.
