Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

GSAP 3.9 Released


| GreenSock
7755

Highlights:

 

FLIP animations for everyone! 🥳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,
})

 

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

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!

  • Like 6

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

Join the Club

Cook up some delightful animation today with a generous dose of GSAP.

- 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

×