Search the Community

Hello, I made a codepen page to illustrate my issue. Basically, I have a black box that tweens its' width and height properties, then tweens down Y 150px and tweens its' width and height again. However, when I resize the page, I need to change the Y and width and height coordinates. How can I do this when it's written in the script? Can I save the coordinates as variables and somehow change them when the browser resizes? Thanks!

I want to update a tween variable as per window's width on window resize. I have tried with below code but it seems not working. Could you please help me? var logoWidth = 100; window.onresize = function(){ logoWidth = (window.innerWidth > 767) ? 100 : 50; } var _timeline = new TimelineMax(); _timeline.to(element, 1, {width:logoWidth}); Any help appreciated!

Hi, I need help in improving my flaky transitions. Looking at the CodePen if you select the info button on the case tiles 2-4 they do not transition out and back in again very smoothly - its somewhat jumpy. Note: when adding an additional 3 or more cases the transitions now become really smooth - this is the behaviour I'm after. As usual any help would be great. Cheers.

Hi! It's the first time i use greensock Draggable including throwprops and its awesome! I read in older topics, that if you have a draggable instance with type "scroll" (in my case "scrollLeft") there is no need for setting bounds. Thats true and it works perfect. But if i resize the window and throwProps is true the overscrolling doesnt work anymore (always works on the left side (scrollLeft position 0), but on the right border it starts flickering around instead of overscrolling (its like the boundaries/the width are/is not correct). I tried update and applyBounds on resizing but the problem is still there. During the resize process the elements inside are resizing too (mix between css and js). The problem appears only in chrome. Any ideas ?

Hi guys, I am just playing around with the the Draggable plugin and its awesome. As it can be used for not only dragging but also rotate or scroll content, I wonder if there is a way to make it to resize an element onDrag? Has anyone done that? Does anyone know how it could be done? Thanks, Praney

I am attempting to resize a draggable DOM. As in the user can select an edge of the DOM and drag it to a new size. Is this something that GSAP is designed to handle or am I on the wrong track? jQueryUI 'resizable' doesn't really work with a draggable (or I haven't yet been able to get it to work).

I have a grid of thumbnails (6 columns / 5 rows) that I'm animating on load and resize. On load the columns stagger from left to right into the page. On resize the rows stagger down off the page, and then the columns re-enter from left to right. The number of columns, rows, tn size and position are based on window width and aspect ratio. I'm using autoAlpha to hide/reveal column 6 and row 5. The code/conditions for the rows are working as expected. The problem I'm having is with column 6 on "resize only". 6 cols if window width >1200px 5 cols if window width <= 1200px If 6 cols enter on "load" everything works always as expected. When resizing ww <=1200px, grid exits down, then 5 cols re-enter from left (col 6 hidden). Then if you resize ww >1200px, grid exits down, then 6 cols re-enter from left. Everything works fine no matter how many times the ww is resized. If 5 cols enter on "load" there is a problem with col 6 on "resize". When resizing ww >1200px, grid exits down, then col 6 becomes immediately visible in it's end "x" position (farthest right) and the remaining 5 cols re-enter from left. Column 6 should become visible "but" positioned off the page to left, then stagger in with the other 5 cols. My thinking is the autoAlpha event is firing before being positioned, even though it is called within the positioning function. I have tried putting autoAlpha at the end of a TimelineLite timeline, used a positive position offset, etc, mostly with worse results. I have also tried staggerTo using an x start position -(ww+500). They position and size correctly but for some reason they don't enter into the page using a variable ie: "+=ww+500" but it does work with just a number within the string "+=1400". If I use the staggerTo method I can't use a fixed number if I use a variable for the starting negative offset. If I do use a fixed number that will insure that the grid clears all different window widths ie: -3000px, the entrance speed won't be consistent across different window widths. I've uploaded copies of the files (the tn images have been replaced with solid colored jpgs) http://www.peterdavidian.com/gsap/staggerFrom.html I've searched the JS forums but couldn't find a post with a solution. It's been days now (really almost a week) and I need someones help! Thank you, Peter My functions: dLoad: sizes and positions the grid container tSz: sizes the tn's tPos: sizes and positions the number of cols and rows tEnterR: staggers the cols in from left tExitD: staggers the rows down, then calls tReEnterR tReEnterR: calls tSz and tPos then staggers cols in from left

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/

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.