- Introducing FlipPlugin
- DrawSVG Values Beyond 0-100%
- ScrollTrigger snap: "labelsDirectional"
- Other Improvements and Bug Fixes
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 MotionTricks.com.
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.