Skip to main content

3.6 release

· 2 min read
Cassie Evans
Jack Doyle
  • Introducing FlipPlugin
  • DrawSVG Values Beyond 0-100%
  • ScrollTrigger snap: "labelsDirectional"
  • Other Improvements and Bug Fixes

Introducing FlipPlugin

Flip Plugin lets you seamlessly transition between two states even if there are sweeping changes to the structure of the DOM like re-parenting of elements which would normally cause them to jump to a new position/size. UI transitions that would normally be a nightmare just got remarkably simple to code.

Watch the visual walk through video and you'll see why this is not your typical FLIP library.


It's called "Flip" because it uses the FLIP (First, Last, Invert, Play) animation technique (coined by Paul Lewis).


DrawSVG Values Beyond 0-100%

DrawSVG now allows you to animate to values beyond the 0-100% range. That means that creating looping/wrapping effects with DrawSVG is even easier! Check out this collection of demos by Craig, a GreenSock moderator and the creator of



DrawSVG is one of many Club GSAP plugins (not in the public downloads or repos).

ScrollTrigger snap: "labelsDirectional"

When you've got a timeline hooked up to a ScrollTrigger, you've always been able to set snap: "labels" to have it dynamically snap to the closest label, but the new snap: "labelsDirectional" option will take into consideration the direction of scrolling and force it to go to the next label in that direction. So, for example, users aren't forced to drag past the halfway point of sections to have it snap to the next one. It may sound like a small thing, but it can make things feel so much more delightfully intuitive. In the demo below, try changing snap: "labels" for a comparison - notice it'll only snap once you go past halfway? But "labelsDirectional" snaps based on the direction of playhead movement.


Other Improvements and Bug Fixes


GSAP 3.6 also has a slew of other improvements and bug fixes so make sure to grab the latest files today!