GSAP 1.16.x Update

March 16th 2015 | GreenSock
favorite

14112

We're constantly improving GSAP to solve the problems you face as a developer/designer. In the recent release of GSAP 1.16.0 and 1.16.1, Draggable got some big upgrades and SVG support has never been better across the whole platform. Here's a summary of what's most exciting in 1.16.x:

Draggable gets "autoScroll"

What happens if you're dragging an element inside a scrollable container (or page) and you reach the edge? Wouldn't it be nice if it automatically scrolled in that direction for you? Wouldn't it be even cooler if it applied variable-speed scrolling based on how close your mouse/touch is to the edge, and it handle MULTIPLE containers? Wish granted.

Video tour

Interactive demo

See the Pen Draggable autoScroll by GreenSock (@GreenSock) on CodePen.

Draggable's new getDirection() method

Sometimes it's useful to know which direction an element is dragged (left | right | up | down | left-up | left-down | right-up | right-down), or maybe you'd like to know which direction it is compared to another element. That's precisely what getDirection() is for.

Video tour

Interactive demo

See the Pen Draggable getDirection() by GreenSock (@GreenSock) on CodePen.

Easier SVG animation with svgOrigin

For SVG elements, CSSPlugin recognizes a new svgOrigin special property that works exactly like transformOrigin but it uses the SVG's global coordinate space instead of the element's local coordinate space. This can be very useful if, for example, you want to make a bunch of SVG elements rotate around a common point. So you can do TweenLite.to(svgElement, 1, {rotation:270, svgOrigin:"250 100"}) if you'd like to rotate svgElement as though its origin is at x:250, y:100 in the SVG canvas's global coordinates. It also records the value in a data-svg-origin attribute so that it can be parsed back in. So for SVG elements, you can choose whichever one fits your project better: transformOrigin or svgOrigin.

Sara Soueidan used this feature in her excellent Circulus tool demo.

Interactive demo

See the Pen GSAP svgOrigin by GreenSock (@GreenSock) on CodePen.

For more information about how GSAP has solved cross-browser SVG challenges, see https://css-tricks.com/svg-animation-on-css-transforms/ and for performance data, see https://css-tricks.com/weighing-svg-animation-techniques-benchmarks/.

More Draggable improvements

  • Draggable exposes a lockedAxis property so that you can find out whether it's "x" or "y" (assuming you set lockAxis:true in the config object).
  • New onLockAxis callback that fires whenever the axis gets locked.
  • Several performance optimizations were made to Draggable, particularly for transforms and scrolling.
  • Draggable allows you to native touch-scroll in the opposite direction as Draggables that are limited to one axis. For example, a Draggable of type:"x" or "left" permit native touch-scrolling in the vertical direction, and type:"y" or "top" permit native horizontal touch-scrolling.
  • SVG support is better than ever. It plots the rotational origin accurately, for example.
  • Touch support has been improved as well.

Bug fixes

See the github changelogs for 1.16.0 and 1.16.1 for a complete list.

Conclusion

If you're already using GSAP and/or Draggable, we definitely recommend grabbing the latest version. If you haven't tried GSAP yet, what are you waiting for? Head over to the Getting Started article/video now and you'll be having fun in no time.

Helpful links


Get GSAP

Version: 2.0.2 updated 2018-08-27

Core

    Extras

      Plugins

        By using GreenSock code, you agree to the terms of use.

        Help support GreenSock by becoming a member

        Join Club GreenSock