GSAP 1.13.1 Released

Sign in to follow this   Followers 0

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.

Perfect vertical and horizontal centering without any measuring

In the world of Responsive Web Design there is a trend towards designing layouts based on centering content so that variations in screen size don't have a huge impact on the reflow of content. This technique is especially helpful when taking on the challenge of building responsive animations. By combining the new xPercent and yPercent properties with pixel-based x and y translations, you can very easily achieve flexible, centered layouts. Once your content is centered you can offset the position of your elements using convenient pixel values that are relative to the center of the screen. Its a bit much to illustrate with a mere code snippet, so we've created the interactive animation below which walks you through the steps:

See the Pen xPercent/yPercent for negative offset centering 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