Jump to content
GreenSock

Search the Community

Showing results for tags 'responsive'.

  • 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

  1. Hi all, I have to build a responsive full width (not height) tabbed slider with GSAP. Anyone has tried this kind of project? Any ideas will be appreciated. Thanks! neuhaus3000
  2. Hi everyone. Just wondering, if It is possible something like: Draggable.create("#myObject", {type:"xPercent,yPercent"}); or Draggable.create("#myObject", {type:"leftPercent, topPercent"}); Simply said, my goal in both cases is a percentage output. Is this possible with current version of GreenSock Draggable?
  3. I have spent several days creating a very nice banner for a website. The main feature of this is a row of buttons which when clicked uses TimeLineMax to move the background image of the main panel to particular pixel-specified positions in a large background image. I have now installed the banner into the page, and found that making it responsive is not as easy as I anticipated. I had assumed that I would be able to make the content scale with the bounding box, but I've discovered that CSS can't do that. I am now looking for an option that doesn't involve me doing an extensive rework of the banner. One option I have looked at if putting it in an iframe - a bit of a kludge, but it does look as if it will work. Is there a better way to do this? Thanks, James (I have now used greensock on a couple of projects, and I like it)
  4. Hi All! I am in the process of building a simple slider with the GSAP's Draggable inside a responsive(ish) site — only one breakpoint. Basically what the slider does is — as it is being dragged it updates its' position to the span above. Essentially letting the user know how much percentage they are on the bar. Note: The draggable's initial starting position is provided by an outside AngularJS service, but in the CodePen test is set to fixed 50%. After initializing Draggable(s), we convert that % value into pixel values, and use TweenMax.set() to set the new value. This was done, because because for some reason the Draggable initializes back to left: 0px and drags form there if the % value is left. Kind of jarring. When the user stops dragging, then the value is calculated back to the % value, so that when the site is resized then I can keep the draggable relative to it's parent bounds. Before the drag is started again... onPress: I reconvert the percentage value back to pixel, and then we can start the drag... Issue (#4): Number 4 in the list above is where I currently have an issue. The draggable is restarting its' drag position from 0px again even though the left value has already been recalculated back to pixel based value...I basically have to "click" the draggable with full release THEN I can drag without it restarting from left: 0px, and if I just press and then drag it starts from 0px... Any ideas as to what is causing this issue? Or maybe I'm missing something. I've thrown an almost exact copy of my code inside the CodePen below.
  5. 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
  6. GreenSock

    GSAP 1.13.1 Released

    Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. Percentage-based transforms (great for responsive animation) Have you ever had to Google "vertically center a div with CSS"? Maybe you used a bunch of jQuery code that measures the width and height of a bunch of elements so that you can center them based on half-width and half-height? Ever used an onresize event to painstakingly recalculate the size and position of multiple elements that you need for a full-screen, responsive animation? We have very good news for you. CSSPlugin recognizes two new special properties: xPercent and yPercent which can be combined with regular x and y transforms to deliver unprecedented positional control. And yes, since these are transforms, they can be GPU-accelerated for outstanding performance. Example: using xPercent for responsive fullscreen sliders / carousels With the new xPercent property you can easily create fullscreen sliders that don't require lots of costly calculations when screens change size, nor do you have to create separate animations for different devices. Notice how in the demo below you can change the width of the black container and the animation seamlessly adjusts. No code trickery behind the scenes, the TimelineMax animation is built only once. See the Pen xPercent / basic by GreenSock (@GreenSock) on CodePen. To achieve this type of centered layout you could use the following simplified approach //CSS to place origin of all elements in the center or their parent .myClass { position:absolute; left:50%; top:50%; } //JS //center all .myClass elements around their origins TweenLite.set(".myClass", {xPercent:-50, yPercent:-50});//handles all vendor prefixes of translateX(-50%) translateY(-50%) //now we can animate myElement's x/y such that its center is 100px,200px from the origin TweenLite.to(myElement, 1, {x:100, y:200}); CSSPlugin accomplishes this under the hood by prepending a translate(x,y) to the normal matrix() or matrix3d() that it sets on the element. <div class="myClass" style="transform: translate(-50%, -50%) translate3d(150px, 0px, 0px);"></div> As a convenience, if you set the regular x or y to a percent-based value like 50%", GSAP will recognize that and funnel that value to xPercent or yPercent property for you, but we recommend using xPercent/yPercent directly. Thanks to Gary Chamberlain for prompting this feature. Better RequireJS/AMD/Browserify/Node/CommonJS compatibility We have received quite a few requests to make GSAP work with module/dependency tools like RequireJS, Browserify, etc. and we're happy to announce that as of version 1.13.1, that wish has been granted. So, for example, with Browserify you can require("./TweenLite.js") and it'll work. If you're a RequireJS user, snag a super simple example set of files here. A special thanks to David Hellsing for his assistance. Save kb by skipping jQuery. Default selector: document.querySelectorAll() Probably the most common reason that developers load jQuery is to leverage it as a selector engine but all modern browsers support document.querySelectorAll(), so as of version 1.13.1, GSAP uses that as a fallback (after attempting to detect a selector engine like jQuery). That means that you can do something like this, for example: TweenLite.to("li:first-child, li:last-child", 1, {opacity:0.5}); Without loading jQuery. And more Several minor bugs have been squashed too, so make sure you snag the latest files to make sure you're rockin' buttery smooth 60fps animations. Recommended reading: Main GSAP JS page lagSmoothing() and other performance improvements in 1.12.0 Myth Busting: CSS Animations vs JavaScript Why GSAP? A practical guide for developers
  7. jlo

    Responsive Animations

    Hi Greensock guys, Know this topic has been covered a little in some other posts, was reading about using media queries and 'resize' functions here and here, but I wanted to double-check something with you in regards to responsive animations. I've just put together a quick landing page for my portfolio, found here (and big thanks to the GS guys for helping me nut out questions I had along the way with it), and I'm using an if/else statement after the $(document).ready to fire differently scaled animations depending on the browser width. I had put in a window resize event handler in my script but I noticed it was screwing with the animations, they would still be stuck on a particular width's animation even though it had resized. Plus, I was essentially just repeating the same code all over again to get it to work, was thinking there must be a better way to call responsive animations than this. So I'm guessing to make these kinds of responsive animations work we'd need to kill the currently running ones first right? And is there a better/cleaner way of doing this than just repeating functions over when a browser resizes, say for instance if I just made the if/else media queries a function of their own, then recalled that function when a resize fired? Apologies if this is actually simpler than I've figured, I just wanted to clarify this in case any other devs needed a simplified answer to this too, am finding myself having to do a lot of these responsive animations lately and I thought it would be wise to get a more definitive approach to it Thanks as always guys.
  8. I just started to get into using the TweenMax JS animation library, and I have to say that it is pretty sweet. I've gone through and started doing test, and such, and tested the bezier plugin ,which is pretty awesome in itself. My question with the bezier plugin is whether or not it would handle responsive design, such as when the user rescales down their browser window? Currently I have this tween, that is set to animate when the item comes into view. var atween = TweenMax.to('.arrow-test', 2, { bezier:[ {left:100, top:250, alpha: 0}, {left:300, top:0, alpha: 0.5}, {left:500, top:400, alpha:1} ], ease:Power1.easeInOut, paused: true }); My CSS is as follows: .arrow-test-wrapper { position: relative; } .arrow-test { position: relative; top: 0; left: 0; } Does animating on bezier curves support responsive design? Or is there something that I am missing in my code? Thanks!
×