Skip to main content

Blog

Blog posts and Release notes

路 4 min read
Cassie Evans
Jack Doyle
  • Clamp your triggers! - Ever had ScrollTriggered animations at the very top of your page start out partially-scrubbed? Now you can clamp() them! This handy feature ensures that the start and end positions stay within the bounds of the page and ensures that all your "above the fold" elements start off in their native positions.
  • Clamp data-speed - More clamping! This time for ScrollSmoother, you can now wrap your data-speed value in clamp() to make the associated element start out in its natural position if it 's within the viewport at the top of the page.
  • ScrollSmoother speed - Hold onto your hats (or scroll wheels?) We 've added a speed option to ScrollSmoother which you can use to make the page scroll faster or slower.

路 6 min read
Cassie Evans
Jack Doyle
  • gsap.matchMedia() is a game-changer for responsive, accessible-friendly animations.
  • gsap.context() that greatly simplifies setup and reverting of a bunch of animations/ScrollTriggers, especially for React developers!
  • You can now revert() any animation to return the targets to their original state.
  • Set lockAxis: true on an Observer to make it lock into whichever direction the user first drags

路 5 min read
Cassie Evans
Jack Doyle

路 4 min read
Cassie Evans
Jack Doyle

路 6 min read
Cassie Evans
Jack Doyle
  • containerAnimation - vertical scrolling can animate a container horizontally; now you can set up ScrollTriggers on that horizontal movement. It's like having nested ScrollTriggers!
  • preventOverlaps & fastScrollEnd - when you jump to a section, do you have lingering animations that overlap? These features can save the day.
  • isInViewport() - a simple way to check if an element is in the viewport
  • positionInViewport() - find out exactly where an element is in relation to the viewport
  • Directional snapping - by default, snapping will now always go in the direction that the user last scrolled. Much more intuitive! There's even a .snapDirectional() utility method.

路 3 min read
Jack Doyle
  • New: "alignOrigin" for motion paths
  • New: getRelativeDistance() that transcends coordinate spaces
  • convert coordinates between elements/contexts

路 2 min read
Jack Doyle
  • Random staggers
  • shuffle() any Array
  • Timelines can now repeatRefresh
  • repeatRefresh skips yoyo's
  • Smooth handling of complex borderRadius, borderWidth, margin, and padding values