Skip to main content

3.9 release

· 4 min read
Cassie Evans
Jack Doyle

loading...

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:

loading...

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:

loading...

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

loading...

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

loading...

Video Walkthrough Wanna learn about all the nitty-gritty details? Watch this video:

New additions to the keyframe syntax​

Video Walkthrough

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.

loading...

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
});

loading...

And more...​

tip

GSAP 3.9 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​

Happy tweening!

Contents