Jump to content

GSAP 3.9 Released

| GreenSock



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 GreenSock 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:

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

New additions to the keyframe syntaxNew 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 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,



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



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

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


Happy tweening!

  • Like 9

Get an all-access pass to premium plugins, offers, and more!

Join the Club

Have you exercised your animation superpowers today? Go make us proud and tell us about it.

- Team GreenSock

User Feedback

Recommended Comments

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now