We have a big announcement to make! (Drum roll please...)​

🤘 GSAP has been acquired by Webflow to take their animation capabilities to the next level!​

This is exciting news for the future of GSAP — for everyone, but we know that the Webflow folks in particular will be over the moon! It's been a joy to watch our communities grow closer over the last few years — hyping each other up, learning together and producing some of our all-time favourite showcase sites.

Of course our animation community extends far beyond Webflow. GSAP's flexibility and rich feature set make it extremely popular across all kinds of ecosystems, tools and frameworks. It powers over 12 million websites (including most award-winning ones). This acquisition puts GSAP in an even stronger position to serve the broader web community because Webflow is investing development resources into GSAP's continued product innovation.

What is Webflow? Why the acquisition?​

Webflow is a Website Experience Platform (WXP) with a mission to bring development superpowers to everyone - whether a designer, marketer, developer, or agency. Webflow empowers marketing and engineering teams to visually build, manage, and optimize stunning websites. Go on, take a look. Their homepage is even animated with GSAP. 💚

Until now, creating a GSAP GUI was an impossible pipe dream for our small team (despite all the requests for it) but with Webflow's expertise and resources - we're in good hands. The Webflow team has a knack for creating clean easy-to-use interfaces, and we're incredibly excited about combining our expertise to bring something beautiful to life. In short, we're better together.

We don't know exactly what this will look like yet... but we know it's going to be special.

We'd love to hear from you about what your hopes are as GSAP joins the Webflow family. What are your ideas? Help us shape the future. We're listening.

You can read Webflow's post here

• 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.

Clamp Your Triggers​

It can be frustrating when your "above the fold" scrubbed animations start off part-way through. With clamp() you can ensure that they always start out in their native positions, no matter where your triggers are placed.

ScrollTrigger.create({
  trigger: elem,
  start: "clamp(top bottom)", // clamped value - will always fall between 0 and the max scroll
  end: "bottom top" // the parsed pixel value could be negative or more than the max scroll,
})

So what 's going on under the hood?​

All scroll triggered animations have trigger points that determine where the animation starts and ends. These values are nice and flexible, you can write them out as a number, as string shorthand or return one of those options from a function.

start: "bottom 50%+=100px" // flexible string shorthand
start: 200, // pixel value
start: () => window.innerHeight / 2 // function that returns a number or string

However you write it out, ScrollTrigger converts these values into a numeric scroll positions.

If you set up your start marker above the fold, the start position will be negative and the animation will start off partway through. Sometimes this is desired behaviour but it can also be a bit awkward and unexpected.

The new clamp feature allows us to prevent these trigger 'leaks '. We can tell ScrollTrigger to always keep the trigger value between 0 (the top of the page) and the maximum scroll position.
Check out this demo and pop open the console to see the differing values. 👀

On load you can see that the un-clamped animation starts part-way through. If you scroll down to the bottom you 'll notice that it also doesn 't complete as the end marker is further down than the maximum possible scroll distance.

If you want to know what 's happening under the hood check out the docs on clamp. Wrapping the trigger in "clamp()" is just like telling ScrollTrigger to run the parsed trigger position through the following util -

gsap.utils.clamp(0, maxScroll, triggerPosition)

Clamp data-speed​

You can also use the new clamp feature over in ScrollSmoother-land. Now, when you apply data-speed to "above-the-fold" elements, they 'll start exactly where you placed them in your design, unaffected by their speed value. No more unexpected offsets! Check it out...

New speed option for ScrollSmoother​

ScrollSmoother.create({
  smooth: 2,
  effects: true,
  speed: 1.5, // 1.5x the normal speed
});

Now you have the power to control your scroll speed with a simple multiplier. Want things to move faster? Set it to 2 and watch your content zoom past twice as fast! Prefer a leisurely pace? Set it to 0.5 for a leisurely scroll at half the speed.

Resources​

Happy tweening!​

• 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

Responsive, accessibility-friendly animations with gsap.matchMedia()​

One of the hardest challenges for web-animators is crafting animations that work seamlessly on all screen sizes and respect users motion preferences. Well, not anymore!

gsap.matchMedia() lets you easily tuck setup code into a function that only executes when a particular media query matches and then when it no longer matches, all the GSAP animations and ScrollTriggers created during that function 's execution get reverted automatically! Customizing for mobile/desktop or prefers-reduced-motion is remarkably simple and incredibly flexible.

Basic syntax​

// create
let mm = gsap.matchMedia();

// add a media query. When it matches, the associated function will run
mm.add("(min-width: 800px)", () => {

  // this setup code only runs when viewport is at least 800px wide
  gsap.to(...);
  gsap.from(...);
  ScrollTrigger.create({...}); 

  return () => { // optional
    // custom cleanup code here (runs when it STOPS matching)
  };
});

// later, if we need to revert all the animations/ScrollTriggers...
mm.revert();

Conditions syntax - 💪 POWERFUL 💪​

What if your setup code for various media queries is mostly identical but a few key values are different? If you add() each media query individually, you may end up with a lot of redundant code. Just use the conditions syntax! Instead of a string for the first parameter, use an object with arbitrarily-named conditions and then the function will get called when any of those conditions match and you can check each condition as a boolean (matching or not). The conditions object could look like this:

{
  isDesktop: "(min-width: 800px)",
  isMobile: "(max-width: 799px)",
  reduceMotion: "(prefers-reduced-motion: reduce)"
}

Name your conditions whatever you want.

Below we 'll set the breakpoint at 800px wide and honor the user 's prefers-reduced-motion preference, leveraging the same setup code and using conditional logic where necessary:

let mm = gsap.matchMedia(),
    breakPoint = 800;

mm.add({

  // set up any number of arbitrarily-named conditions. The function below will be called when ANY of them match.
  isDesktop: `(min-width: ${breakPoint}px)`,
  isMobile: `(max-width: ${breakPoint - 1}px)`,
  reduceMotion: "(prefers-reduced-motion: reduce)"

}, (context) => {

  // context.conditions has a boolean property for each condition defined above indicating if it 's matched or not.
  let { isDesktop, isMobile, reduceMotion } = context.conditions;

  gsap.to(".box", {
    rotation: isDesktop ? 360 : 180, // spin further if desktop
    duration: reduceMotion ? 0 : 2 // skip to the end if prefers-reduced-motion
  });

  return () => { 
    // optionally return a cleanup function that will be called when none of the conditions match anymore (after having matched)
  }
}); 

Nice and concise!

You can set a scope so that all selector text inside the function maps only to descendants of a particular element or React Ref or Angular ElementRef. This can greatly simplify your code. See the full documentation for all the details.

gsap.context()​

A gsap.context() offers two key benefits:

• Collects all GSAP animations and ScrollTriggers that are created within the supplied function so that you can easily revert() or kill()ALL of them at once. No need to keep track of a bunch of variables, Arrays, etc. This is particularly useful in React modules or anywhere you need to be able to "clean up" by reverting elements to their original state.
• [optionally] Scopes all selector text to a particular Element or Ref. This can help simplify your code quite a bit and avoid needing to create lots of Refs in React/Angular. Any GSAP-related selector text inside the supplied function will only apply to descendants of the Element/Ref.

Let 's say you 've got a big block of GSAP code that 's creating a bunch of different animations and you need to be able to revert() them all...

let ctx = gsap.context(() => {
 gsap.to(...);
 gsap.from(...);
 gsap.timeline().to(...).to(...);
 ...
});

// then later...
ctx.revert(); // BOOM! Every GSAP animation created in that function gets reverted!

This is effectively a silver bullet for the React 18 "double-call of useEffect() in Strict Mode" issue that normally breaks from() logic - just call revert() on the Context in your useEffect() cleanup function:

See the full documentation for all the details.

revert() any animation​

What if you want to revert an element back to its state BEFORE it was animated? You could just animation.progress(0), right? Sort of. Consider this element:

<div class="box"></div>

No inline styles at all. The opacity is 1 (the default) and then you do this:

// fade out
let tween = gsap.to(".box", {opacity: 0});

Now let 's try getting back to the original state:

tween.progress(0).pause();

That does indeed set it back to the starting values that GSAP parsed from the computed style:

<!-- inline style is still present -->
<div class="box" style="opacity: 1"></div> 

But that means it still has inline styles. Usually that doesn 't matter, but perhaps a media query CSS rule sets opacity to 0.5 on that element. Doh! The inline style will overrule the class rule. So we need a way to have a tween/timeline keep track of the original inline styles and REMOVE the ones that it added. That requires a new method because progress(0) SHOULD set inline styles to ensure the state is what it 's supposed to be at that point in the animation.

Solution: animation.revert()​

GSAP 3.11 adds a new .revert() method to all Tweens and Timelines, so it 's as simple as:

animation.revert(); // removes inline styles that were added by the animation

Observer gets lockAxis feature​

Set lockAxis: true on an Observer and it 'll watch the direction of the very first drag move (with type: "pointer" and/or "touch") and lock into that direction until the user releases the pointer/touch. There 's even an onLockAxis() callback that you can tie into.

And more...​

Resources​

Happy tweening!​

• ScrollSmoother plugin for delicious, buttery-smooth scrolling that leverages native scroll. 💚
• Observer plugin that greatly simplifies setup for reacting to various events across devices.
• gsap.quickTo() for frequent redirection to new values like mouse followers
• ScrollTrigger.normalizeScroll() solves a bunch of scroll-related annoyances across devices and browsers.
• "*=" and "/=" relative prefixes - multiply or divide the current value.

Introducing ScrollSmoother.🥳​

A shiny new plugin, exclusively for Club GSAP members!

ScrollSmoother makes it simple to add a buttery smooth vertical scrolling effect to your ScrollTrigger pages. Under the hood, ScrollSmoother leverages native scrolling which allows it to sidestep many of the accessibility annoyances that plague smooth-scrolling sites. No fake scrollbars, and no messing with pointer or touch functionality.

ScrollSmoother.create({
  content: "#smooth-content",
  wrapper: "#smooth-wrapper",
  smooth: 1, // how long (in seconds) it takes to "catch up" to the native scroll position
  effects: true, // looks for data-speed and data-lag attributes on elements
  normalizeScroll: true, // prevents address bar from showing/hiding on most devices, solves various other browser inconsistencies
  ignoreMobileResize: true // skips ScrollTrigger.refresh() on mobile resizes from address bar showing/hiding
});

Effects...​

ScrollSmoother will integrate seamlessly with all your scroll-triggered animations. but we've also added some bonus ScrollSmoother effects. ✨

• speed -Great for parallax effects! It adjusts the speed at which an element moves vertically while scrolling through the viewport. A speed of 1 is normal speed, 2 is double speed, etc.
• lag -Add some lag* to gently flow elements behind the scroll before they ease back to their natural scroll position.

* no seriously, trust us. It's the good kind of lag.

<div data-speed="0.5"></div> <!-- half-speed of scroll -->
<div data-speed="2"></div> <!-- double-speed of scroll -->
<div data-speed="1"></div> <!-- normal speed of scroll -->

<div data-lag="0.5"></div> <!-- takes 0.5 seconds to "catch up" -->
<div data-lag="0.8"></div> <!-- takes 0.8 seconds to "catch up" -->

Observer​

The brand new 3.5kb Observer plugin offers a super-flexible, unified way to sense meaningful events across all (touch/mouse/pointer) devices without wrestling with all the implementation details. Perhaps you want to respond to "scroll-like" user behavior which could be a mouse wheel spin, finger swipe on a touch device, a scrollbar drag, or a pointer press & drag...and of course you need directional data and velocity. No problem! Tell Observer which event types to watch (wheel, touch, pointer, and/or scroll) and it will collect delta values over the course of each requestAnimationFrame tick (debounced for performance by default) and automatically determine the biggest delta and then trigger the appropriate callback(s) like onUp, onDown, onDrag, etc.

Look how easy it is to trigger next()/previous() functions based on when the user swipes up/down or uses their mouse wheel:

Observer.create({
  target: window,         // can be any element (selector text is fine)
  type: "wheel,touch",    // comma-delimited list of what to listen for ("wheel,touch,scroll,pointer")
  onUp: () => previous(), 
  onDown: () => next(),
});

Demo​

Notice there's no actual scrolling in the demo below but you can use your mouse wheel (or swipe on touch devices) to initiate movement so it "feels" like a scroll:

Since ScrollTrigger leverages Observer internally for normalizeScroll(), we exposed it via ScrollTrigger.observe() so you don't have to load an extra file if you're already using ScrollTrigger.

gsap.quickTo()​

If you find yourself calling gsap.to() many times on the same numeric property of the same target, like in a "mousemove" event, you can boost performance by creating a quickTo() function instead. Think of a quickTo() like an optimized function tied to one particular numeric property, where it directly pipes a new number to it.

Example

let xTo = gsap.quickTo("#id", "x", {duration: 0.4, ease: "power3"}),
    yTo = gsap.quickTo("#id", "y", {duration: 0.4, ease: "power3"});

document.querySelector("#container").addEventListener("mousemove", e => {
  xTo(e.pageX);
  yTo(e.pageY);
});

Mouse Follower Demo​

ScrollTrigger.normalizeScroll() and ignoreMobileResize​

Have you ever run into these problems?:

• Address bar on mobile browsers shows/hides and resizes the viewport, causing jumps
• When scrolling fast, a pinned element seems to shoot past for a brief moment and then jump to the correct pinned position (multi-thread synchronization issues)
• iOS jitter
• Overscroll behavior that seems impossible to prevent on iOS
• Inconsistent momentum scrolling across devices

The powerful new normalizeScroll() functionality intercepts native browser scroll behavior and handles it on the JavaScript thread instead which solves the problems mentioned above on most devices (iOS Phones in portrait orientation still show/hide the address bar). To enable it, simply:

ScrollTrigger.normalizeScroll(true);

To prevent ScrollTrigger.refresh() from running (and recalculating start/end positions) when a mobile browser shows/hides its address bar, you can now do:

ScrollTrigger.config({ ignoreMobileResize: true });

So easy!

Read more in the docs.

New "*=" and "/=" relative prefixes​

You've always been able to add or subtract from the current value, like:

gsap.to(".box", {
  x: "+=100", // 100 more than the current value
  y: "-=100", // 100 less than the current value
});

...and now you can multiply or divide accordingly:

gsap.to(".box", {
  x: "*=2", // double the current value
  y: "/=2", // halve the current value
});

​

And more...​

Resources​

Happy tweening!

• Flip Plugin is no longer for members-only! - consider it an early Christmas present from us to you.
• CustomEase is now in the public downloads as well (and on the CDN)! 'Tis the season to be jolly.
• Brand new Keyframe options that can drastically reduce the amount of code you must write. If you're used to CSS keyframes, you'll love this.
• Flip Plugin got a major overhaul and new features including batch() for complex scenarios.

FLIP animations for everyone!​

Flip plugin can give you some serious animation superpowers once you learn to think in terms of "FLIP" ("First", "Last", "Invert", "Play"). Here's a demo that explains the technique:

Sometimes you'll need to deal with state changes that you can't control, or reparenting of elements. Maybe a thumbnail image needs to transition to fill the viewport with position: fixed, or a grid of elements must get smoothly re-ordered within a flexbox container. This is where Flip Plugin shines!

And now it's included in the public downloads and CDN! That's right, Flip Plugin isn't just for Club GSAP members anymore (but seriously, if you haven't joined yet, what are you waiting for?). And for those who are members, don't worry - we've got something fun coming just for you in the future.

Here's an example where a video that's in the flow of text seamlessly transitions into position: fixed in the corner when you scroll far enough:

Even when the original position of elements could change - like in this spinning container, FLIP will handle the transition with ease.

And here's a fan-favorite showing a grid of tiles you can filter by color and Flip smooths everything out:

New additions to the keyframe syntax​

Keyframes are a great way to animate a target through multiple steps while keeping your code nice and concise. You can think of them as a sub-timeline nested inside a tween

Here's a reminder of the existing syntax.

gsap.to('.elem', {
    keyframes: [
        { x: 100, duration: 1 },
        { y: 200, duration: 1, delay: 0.5 }, // create a 0.5 second gap
        { rotation: 360, duration: 2, delay: -0.25 } // overlap by 0.25 seconds
    ]
});

New Keyframe options​

Percent-based keyframes​

This familiar syntax will make porting animations over from CSS a breeze!
Instead of using delays and duration in the keyframes themselves, you specify the styles you want at certain waypoints during the animation, and just like CSS, if you omit a property from one of the keyframes the value will interpolate across that gap.

gsap.to('.elem', {
    keyframes: {
        '0%': { x: 100, y: 100 },
        '75%': { x: 0 },
        '100%': { x: 50, y: 50 }
    },
    duration: 2
});

Array-of-values​

Just define an Array of values and they'll get equally distributed. So simple! And you don't need to make sure the Arrays are equal in length. Plenty of flexibility.

gsap.to('.elem', {
    keyframes: {
        x: [100, 0, 50],
        y: [100, 0, 50]
    },
    duration: 2
});

Demos​

With Object keyframes and Percentage keyframes you can drill down and add different eases into individual keyframes.

You can even combine multiple easing properties, keyframes and normal tween values. 🤯

gsap.to('.box', {
    keyframes: {
        y: [0, 80, -10, 30, 0],
        ease: 'none', // ease across the entire set of keyframes (defaults to the one defined in the tween, or "none" if one isn't defined there)
        easeEach: 'power2.inOut' // ease between each keyframe (defaults to "power1.inOut")
    },
    rotate: 180,
    ease: 'elastic', // the "normal" part of the tween. In this case, it affects "rotate" because it's outside the keyframes
    duration: 5,
    stagger: 0.2
});

And more...​

Resources​

Happy tweening!

• 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.

containerAnimation​

We try to keep an eye on common challenges that the GSAP community faces. A popular effect is to create horizontally-moving sections that are tied to vertical scrolling.

That's simple enough with the animated horizontal "scroll" technique where a pinned container is animated along the x-axis to emulate horizontal scrolling.

However, since the effect is an animation as opposed to native scroll, it's very tricky to trigger animations within this horizontally "scrolling" container.

Enter containerAnimation. 🥳

With containerAnimation, you can actually create ScrollTriggers on that fake-scrolling container to detect when an element is 'scrolled' into view horizontally and then trigger an animation. Think of it like a ScrollTrigger inside a ScrollTrigger. 🤯

• First, we create a linear tween to handle the horizontal 'scroll'
• Then we can pass that animation (as the containerAnimation) to the ScrollTriggers of tweens or timelines

// keep a reference of the horizontal 'fake scrolling' animation so we can pass it around
let scrollTween = gsap.to('.container', {
    xPercent: -100 * (sections.length - 1),
    ease: 'none', // <-- IMPORTANT!
    scrollTrigger: {
        trigger: '.container',
        start: 'top top',
        end: '+=3000',
        pin: true,
        scrub: 0.5
    }
});

// now let's create an animation that triggers based on the horizontal fake-scroll:
gsap.to('.box', {
    y: -100,
    scrollTrigger: {
        trigger: '.box',
        start: 'left center',
        containerAnimation: scrollTween // <-- NEW!!
    }
});

Check out this demo to see it in action!

preventOverlaps and fastScrollEnd​

Scroll-triggered animations pose unique challenges. Unlike animations that play on load, you're putting control in the users' hands. They decide how fast to scroll, which direction to scroll – and by association – when the animations get triggered. With this in mind, we added two new features to ScrollTrigger to help avoid overlaps between successive non-scrubbed animations:

• preventOverlaps kicks in as a ScrollTrigger is about to trigger an animation; it finds preceding scrollTrigger-based animations and forces those previous animations to their end state – avoiding unsightly overlaps.
• fastScrollEnd will force the current ScrollTrigger's animation to completion if you leave its trigger area above a certain velocity (default 2500px/s). This property can help to avoid overlapping animations when the user scrolls quickly.

We're especially excited about the UX benefits this brings. When users are in a hurry to access information, slow animation can be a frustrating hindrance to their goal. With fastScrollEnd, we can avoid wearing down the patience of task-focused users by quickly forcing animations to their end state when scrolling quickly.

scrollTrigger: {
  trigger: ".container",
  fastScrollEnd: true // (default 2500px/s)
  // or
  fastScrollEnd: 3000 // (custom 3000px/s velocity)

  preventOverlaps: true // prevent overlaps in preceding scrollTrigger animations
  // or
  preventOverlaps: "group1" // prevent overlaps in specific group of scrollTrigger animations
}

You can take a look at how these new properties work, independently and in unison, by scrolling down in this demo at different speeds and toggling the options:

In addition to these new features we've added some handy methods to help you detect when an element is in view, and where.

isInViewport()​

ScrollTrigger.isInViewport() lets you find out if a particular element is in the viewport.

if (ScrollTrigger.isInViewport('#selector')) {
    // in the viewport vertically
}

You can also find out if a certain proportion is in view. The following will return true if at least 20% of the element is in the viewport:

if (ScrollTrigger.isInViewport(element, 0.2)) {
    // at least 20% of the element is in the viewport vertically
}

To check horizontally instead of vertically, just use the 3rd parameter (boolean):

if (ScrollTrigger.isInViewport(element, 0.2, true)) {
    // at least 20% of the element is in the viewport horizontally
}

positionInViewport()​

The ScrollTrigger.positionInViewPort() method lets you get a normalized value representing an element's position in relation to the viewport where 0 is at the top of the viewport, 0.5 is in the center, and 1 is at the bottom. So, for example, if the center of the element is 80% down from the top of the viewport, the following code would return 0.8:

ScrollTrigger.positionInViewport(element, 'center');

For the reference point (2nd parameter), you can use keywords like "center" (the default), "top", or "bottom". Or you can use a number of pixels from the element's top, so 20 would make the reference point 20 pixels down from the top of the element.

Demo​

Directional snapping​

By default, snapping will now always go in the direction that the user last scrolled. Much more intuitive! Previously, it would snap to the closest value regardless of direction which could lead to annoying snap-back behavior.

There's even a ScrollTrigger.snapDirectional() utility method that lets you do your own directional snapping for any numeric values. It returns a snapping function that you can feed a value to snap, and a direction where 1 is forward (greater than) and -1 is backward (less than). For example:

// returns a function that snaps to the closest increment of 5
let snap = ScrollTrigger.snapDirectional(5);
snap(11); // 10 (closest, not directional)
snap(11, 1); // 15 (closest greater than)
snap(11, -1); // 10 (closest less than)

You can even use an Array of values!

let values = [0, 5, 20, 100];
// returns a function that'll snap to the closest value in the Array
let snap = ScrollTrigger.snapDirectional(values);
snap(8); // 5  (closest, non-directional)
snap(8, 1); // 20 (closest greater than)
snap(99, -1); // 20 (closest less than)

And more...​

• Percentage based position parameter options for timelines
• Better support for SVG elements with Flip plugin.
• Easily scope animations to your components!
  • New scoped selector - gsap.utils.selector()
  • Optional scope parameter added to gsap.utils.toArray()

Percentage based position parameter.​

The position parameter is small but mighty. It's the key to building sequenced animations with precise control over timings, and now it's even more powerful!

This update gives us the ability to position animations using percentage values - either relative to the previous tween or animation, or relative to the duration of the animation being inserted. The percent is based on the totalDuration(), so repeats, yoyos and staggers will be factored in.

This is such an exciting one because it allows us to tweak durations without affecting positioning!

Say we wanted to overlap a tween by half of it's own duration. Until now we would do a little mental math, divide the duration in half and add it to the position parameter as a relative position.

tl.to(..., {duration: 2}, "-=1");

But if we were to change the duration, we would also have to update the position parameter

Now, with the addition of percentages, we can do this instead:

// overlap by half of the inserted tweens duration, -1s:
tl.to(..., {duration: 2}, "-=50%");

Alternately, we can position a tween or timeline in relation to the most recently-added animation.

tl.to(".other", {x: 100, duration: 2});
// insert 25% of the way through the most recently added animation. 
// In this case - 0.5s into the 2s duration.
tl.to(".class", {x: 100}, "<25%");

Or at a percentage from the end of the most recently-added animation, like ">-25%".

>-25% is equivalent to <75%

tl.to(".other", {x: 100, duration: 2});
// insert 25% of the way from the end of the most recently added animation. 
// In this case - 0.5s from the end of the 2s duration.
tl.to(".class", {x: 100}, ">-25%");

As '+=' and '-=' are always based on the inserting animations total duration, we can even use a pointer to reference the starting point of the previous tween, whilst using the inserting tweens duration as the percentage offset.

tl.to(".other", {x: 100, duration: 2});
// insert 50% of the inserting tweens duration from the beginning of the most recently added animation. 
// In this case - 0.5s from the start of the previous tween.
tl.to(".class", {x: 100, duration: 1},"<+=50%");

Powerful stuff! If you want to dig in a bit more, here's a video explainer and some demos to play around with. You'll be a positioning pro in no time!

Check it out in action in these demos.​

Interactive Position Parameter Demo​

Better support for SVG elements with Flip plugin.​

Flip plugin has been extended with better support for SVG elements. SVG already has a great coordinate system to work within - but we think this could assist transitions in live data-vis or when animating between states in generative SVG.

We'd love to see what you do with this so don't forget to share your demos with us!

In the meantime, here's a simple example

Easily scope your animations​

Modern front end dev is all about encapsulated components, but scoping animations to each individual component can be tricky. React devs, for example, often find themselves in "ref Hell" creating a ref for each and every element they want to animate. Wouldn't it be nice to just use classes and selector text that's limited to your component instance?

gsap.utils.selector()​

With gsap.utils.selector() you can grab descendant elements from the selected element.

This is great for components because you can create a scoped selector for that component's main container element and then use that to select descendants. It's similar to calling .querySelectorAll() on that element – rather than on the document – except with a few added benefits:

• It returns an Array rather than a NodeList, so you get access to convenient array methods like .filter() and .map().
• You can pass a React ref or Angular ElementRef to gsap.utils.selector(). Then when you use the resulting function, it will automatically check for the .current/.nativeElement in case it was re-rendered since creation.

// Vanilla
let q = gsap.utils.selector(myElement); // or use selector text like ".class"
let boxes = q(".box"); // finds only elements with the class "box" that are INSIDE myElement
// or plug directly into animations
gsap.to(q(".circle"), {x: 100});

// React
let el = useRef();
let q = gsap.utils.selector(el);
      
useEffect(() => {
  // uses el.current.querySelectorAll() internally
  gsap.to(q(".box"), {x: 100});
}, []);

// Angular
@Component({ ... })
class MyComponent implements OnInit {

  constructor(public el: ElementRef) {
    this.q = gsap.utils.selector(el);
  }

  ngOnInit() {    
    // uses this.el.nativeElement.querySelectorAll() internally
    gsap.to(this.q(".box"), { x: 100 });
  }
}

A common pattern in React is to declare a ref for every element you want to animate, but that can make your code very verbose and hard to read.

By using a scoped selector, we only need to use a single ref. Then we can simply select the descendants.

gsap.utils.toArray()​

We've also added an optional, second scope parameter to gsap.utils.toArray()

This will find all the descendant elements of myElement with the class of "box":

gsap.utils.toArray(".box", myElement)

And more...​

Resources​

Happy tweening!

• 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).

Resources​

• Full documentation
• Showcase
• How-to demos

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.

Other Improvements and Bug Fixes​

• Accommodating different setups for various screen sizes, like a mobile version and desktop version - ScrollTrigger.matchMedia()
• Batching and staggering elements that enter the viewport, similar to what's often done with IntersectionObserver - ScrollTrigger.batch()
• Integrating with smooth scrolling libraries - ScrollTrigger.scrollerProxy()

GSAP 3.4 has arrived with some significant improvements to ScrollTrigger:​

ScrollTrigger.matchMedia() ScrollTrigger.matchMedia()​

You can use standard media queries to seamlessly transition between different ScrollTriggers. It's surprisingly simple to set up and let ScrollTrigger automatically handle all of the creating, undoing, and destroying for you.

Basic setup​

ScrollTrigger.matchMedia({
    
  // desktop
  "(min-width: 800px)": function() {
    // setup animations and ScrollTriggers for screens 800px wide or greater (desktop) here...
    // These ScrollTriggers will be reverted/killed when the media query doesn't match anymore.
  },

  // mobile
  "(max-width: 799px)": function() {
    // The ScrollTriggers created inside these functions are segregated and get
    // reverted/killed when the media query doesn't match anymore. 
  },
    
  // all 
  "all": function() {
    // ScrollTriggers created here aren't associated with a particular media query,
    // so they persist.
  }
    
});

There's a new ScrollTrigger.saveStyles() method that can be useful with matchMedia(). It saves the current inline styles for any element(s) so that they're reverted properly if animations added other inline styles. It's explained in the video above.

See the ScrollTrigger.matchMedia() docs for details.

ScrollTrigger.batch() ScrollTrigger.batch()​

Normally, each ScrollTrigger fires its callbacks (onEnter, onLeave, etc.) immediately when they occur but what if you want to coordinate an animation (like with staggers) of ALL the elements that fired a similar callback around the same time? ScrollTrigger.batch() creates a coordinated group of ScrollTriggers (one for each target element) that batch their callbacks within a certain interval, delivering a neat Array so that you can easily do something like create a staggered animation of all the elements that enter the viewport around the same time. It's a great alternative to IntersectionObserver because it's more widely compatible and easier to work with. Plus you're not restricted to only entering or exiting the viewport - batch() can use ANY start and end values!

Demo​

See the ScrollTrigger.batch() docs for details.

ScrollTrigger.scrollerProxy() ScrollTrigger.scrollerProxy()​

ScrollTrigger purposefully avoids "scrolljacking" (disabling the browser's native scrolling behavior in favor of a custom, non-standard scrolling solution). However, smooth scrolling was by far the most requested feature to pair with ScrollTrigger. There are plenty of smooth-scrolling libraries out there, so we created the .scrollerProxy() method to make it simple to integrate any of them with ScrollTrigger (or create your own effects).

Here's a basic example using Locomotive Scroll but check out the .scrollerProxy() docs for examples with other libraries.

And more... And more...​

GSAP 3.4 also delivers various bug fixes, so we'd highly recommend installing the latest version today. There are many ways to get GSAP - see the Installation page for all the options (download, NPM, zip, Github, etc.).

Resources Resources​

• Full release notes on Github
• Full documentation
• Getting started with GSAP
• Learning resources
• Community forums
• ScrollTrigger Express video course from Snorkl.tv

Happy tweening!

• New: "alignOrigin" for motion paths
• New: getRelativeDistance() that transcends coordinate spaces
• convert coordinates between elements/contexts

GSAP 3.2 has some groundbreaking features for converting coordinates and aligning elements. Check out the video explanation below. Warning: it's a bit advanced, but hopefully you'll see how crazy-useful these capabilities can be.

New: "alignOrigin" for motion paths​

MotionPathPlugin recognizes a new alignOrigin property that pins a certain spot on the target to the path. For example, alignOrigin: [0.5, 0.5] pins the center of the target on the path and sets the transformOrigin accordingly so that rotations are around that point as well. To get a similar effect before 3.2, you'd need to set the transformOrigin separately as well as a -50 xPercent/yPercent.

Use the Array syntax to define progress values along the x and y axis, so [1, 0.5] would be the right side, centered vertically. Or use a point object like {x: 20, y: 50} to specify a coordinate (measured from the top left corner in pixels at its native size).

Sample code​

// Move the element along a path, rotating it along with the line
gsap.to("#spaceship", {
  duration: 5,
  motionPath: {
    path: "#path",
    autoRotate: true,
    align: "#path",
    alignOrigin: [0.5, 0.5] // aligns the center of the target on the path
  }
});

See the MotionPathPlugin docs for details.

New: getRelativeDistance() that transcends coordinate spaces​

Have you ever wanted to move one element to another element even if they're in different containers... which may have various transforms, warping the coordinate systems and making it super difficult to calculate? If so, you will love this magical function which is explained in the video at the top of this page.

See the getRelativePosition() docs for details.

New: convert coordinates between elements/contexts​

GSAP can now take a local coordinate from inside one element and calculate exactly where that coordinate lines up inside of ANOTHER element's local coordinate space! So you could take a "click" pointer event from the window and map that to an element's local coordinate system even if it's deeply nested inside various containers that have transforms applied! Or, as you can see in the demo below, convert between coordinate spaces to make the blue arm stay connected with the rotating red arm:

See the convertCoordinates() docs for details.

And more...​

GSAP 3.2 also delivers various bug fixes, so install the latest version today (3.2.6). There are many ways to get GSAP - see the Installation page for all the options (download, NPM, zip, etc.)

Resources​

• Full release notes on each release is on Github
• Full documentation
• In case you missed it: GSAP 3.1 highlights (previous release)
• Getting started with GSAP
• Learning resources
• Community forums

Happy tweening!