Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'resize'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 16 results

  1. Hi I have an animation that is all tickety-boo, but on smaller screens (less than 736px) I have a marginally different layout and I need to tweak one animation value. In the code below, in the part I've highlighted as // **** THIS IS THE BIT I MEAN, I need to weak the value of "-=.85" which causes the appropriate overlap of the timeline, and change this to "-=.5". My question is, can you only do this by copying and renaming the entire timeline function and putting it inside an if(window.innerWidth < 737){} if statement, and thus change the single value, or is there a more efficient way of doing it? I'm conscious of duplicating a big chunk of code for such a small tweak. function initialIntro1() { var tl = new TimelineMax(); tl // set elements for animations .set(topBlockStagger, {scaleY: 0}) .set(row1, {transformOrigin: "left", scaleX: 0}) .set(logoContainer, {visibility: "hidden"}) .set(menuButton, {scaleX: 0, visibility: "hidden"}) .set([leftBlock], {opacity: 0}) // animations .add("vertical-drop") .staggerTo(topBlockStagger, .75, {transformOrigin: "0 0", scaleY:1, ease: Power2.easeIn}, -.15) .to([menuButton, logoContainer], 0, {visibility: "visible"}) // **** THIS IS THE BIT I MEAN .add("horizontal") .to([row1,logoContainer, menuButton], .75, {transformOrigin: "left", scaleX: 1, ease: Power2.easeIn}, "-=.85") // covers #menu-button and #row-1 .to(contract, 1, {transformOrigin: "right", scaleX: 0, ease: Power3.easeOut}) .to([leftBlock], 3.5, {opacity: 1, ease: Power3.easeOut}, "horizontal") return tl } // call animation on pages 1 and 3 of the site var masterTL = new TimelineMax(); if (p1 || p3) { masterTL .add(initialIntro1()) }
  2. I'm trying to create a simple masonry style portfolio. I'm aware of the many plugins existent, i've tried already masonry.js, but i was quite unhappy with several animations conflict i ended up having with GSAP. Anyway, my question is not even so specific to this very masonry example, so the problem i have here is: this example is based on a series of elements nested inside a multicolumn container. The number of columns is changed according to the window dimension and resizing, or rotation. But at that point all the elements are rearranged suddenly. Could i have a transition instead? I'm not so expert in css transition and i'm not sure that is the way, so very open to suggestions. Maybe GSAP could do the job?
  3. 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
  4. Hi all! In the attached CodePen, I have a reduced test-case of a UI I'm working on. On desktop-view (768px and higher) if you click the "Open Convo" button, the Inbox and Convo panels will both be on the screen by manipulating their `flex-basis`. If you then click the "Open Profile" button (enabled when you click the "Open Convo" button on desktop, you'll see the entire `.app-panels` transform over to show that area. I have a slightly different UI if you interact with the panels on mobile (767px and lower --- do a refresh to interact with mobile and just drag the window in smaller so the other timelines run don't conflict <-- one of the things I'm trying to fix). If you go through the same steps as mentioned above, you'll notice just the `.app-panels` div transforms to show the full-width version of each panel within it -- which all works fine. Now -- refresh and start with the desktop-view again and open the Convo. What I'm doing in the resize listener `optimizedResize.add()` is checking if the convo desktop timeline has been run by using `progress()` and if it is complete and on-resize if it's in a mobile-view, I want to set the progress of the desktop timeline back to the beginning and then set the progress of the mobile timeline to 1 (or finished). I have a `clearProps` helper in the `onReverseComplete()` callback of the desktop timeline, but the ending prop styles of the desktop timeline still remain, so it messes up the mobile-view. I know that's kind of a cluster-f*ck to throw at ya, but hopefully that's a good enough explanation. I'm not sure if it's an issue with editing the state of GSAP timelines within a resize event or if it's the nature of calling the `progress()` function of two timelines that could override each other. Let me know if you need anymore clarifications. Thanks for checking this out!!!
  5. Hey !! I am new at Actinscript, I'm working with Adobe Animate CC and I have a project based on AIR for Android. I want a code that can run and play an AS3 external SWF flash game in full screen with auto-resize to support different android screen sizes. Can you help me with the code please.
  6. Hey guys, In this pen I have 4 elements that are animated diagonally around the screen. On resize I'd like the elements' position to be reset. I tried to do that on line 35, but it isn't working. Any suggestions on how I might achieve this? Thank you so much for your help, Caroline (GSAP's code is from line 1-63)
  7. Hi Is it possible to have a container automatically resize it's height when a div inside of it is moving outside the container's height? in this pen - http://codepen.io/beamish/pen/LNXYGN - will it be possible to have the blue containing box automatically resize it's height when the contained red smaller box reaches the blue box bottom? Thanks, Elior
  8. Hi I'm a big GSAP newbie here. Im using the angularjs framework and I fetch data from a REST service, also flexbox as a layout grid manager, I have a container div with a loading image inside of it. When the data is loaded I ng-hide the loading image and show the data. But is it possible to animate the containers div height as soon as the data is available? So first the div has the height of the loading image, and afterwards the height of the text data returned from the rest service. I dont know the height untill the data is returned so im kind of puzzled here. Any tips on how to handle this? Grts, Ryan
  9. Hi, I´m still very happy to tween a little. This extreme panorama motif is animated perfectly using background-image and GASP. Please have a look at the exsisting project: http://www.privatstrasse-hamburg.de Pending on the relative width the animation should have a proper fitting "speed". I benefit from several postings of this forum - thanks to all - and came to this way: http://codepen.io/mikeK/pen/jEERNg Is that a proper solution? Best regards Manfred
  10. Hi, I'm trying to find a way to dynamically resize elements that are placed in a responsive bootstrap grid system without the resized element 'pushing' other elements while being resized. Such a grid is simply a set of DIVs which dynamically relocate and resize depending on the size of the viewport, e.g.: example. The main point here is that for the responsive bootstrap grid to work properly the elements' positioning should be set to 'absolute'; however, if I do not set the element's position as 'absolute', when I resize one element, all of it's following DOM siblings are automatically moved. This can be seen as the right thing to happen and as the natural behavior of non-absolute elements, but it leads to a situation where dynamic resizing of elements in a responsive bootstrap grid system affects elements that should remain unaffected. I was wondering if there is a possibility that when one element resizes all other elements, which are positioned as 'relative', will automatically relocate their position so that they remain in the same location as before the resize? In the linked codepen, perhaps it is possible for the red box to resize without moving the blue box downwards when both of them are positioned as 'relative'? This possibility seems necessary for dynamic resizing to work properly when elements need to be positioned in a responsive layout. I will be happy to hear of other possibilities for creating a responsive layout with dynamically resized elements. Thanks very much ! Elior
  11. I've been working with Timeline and divs of a 50% width to adjust for window resize. The problem I've encounters is that if you plan on reversing a timeline, it does not recognize that you have resized your divs. I didn't have a good way of showing this in code pen, but this is the site I'm working on: http://heroicdreams.com/test/#servicesportfolio The two divs that break are the colored backdrops. After it animates in, resize the window then click any link and you can see how it glitches from the beginning of the animation. It only remembers the previous div position, not the new resized one.
  12. Hi there, i'm working on a responsive website right now and the issue i'm having implementing greensock to it is when the user resizes the window and a few values like height/width of elements don't get updated unless user refreshes the browser. I was wondering if there's a way to update a few variables everytime the user resizes the window? Cheers, Thales
  13. 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).
  14. 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.
  15. 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
  16. When I try to resize it, it doesn't show. It works fine like this ------ var loader:SWFLoader = new SWFLoader("livingroomout.swf", {container:this); //Load Swf loader.load(); { ----- but when I try to resize the swf, by adding the height and width properties, it doesn't appear at all ----- var loader:SWFLoader = new SWFLoader("livingroomout.swf", {container:this, width:300, height:300}); //Load Swf loader.load(); { ----- any help? pleasee???? im a noob at this
×