GSAP 3.9 Released

See the Pen box by GreenSock (@GreenSock) on CodePen.

Highlights:

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 C…

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!


Print Share Comment Cite Upload Translate
APA
Blog | Sciencx (2024-03-28T12:11:07+00:00) » GSAP 3.9 Released. Retrieved from https://www.scien.cx/2021/12/16/gsap-3-9-released/.
MLA
" » GSAP 3.9 Released." Blog | Sciencx - Thursday December 16, 2021, https://www.scien.cx/2021/12/16/gsap-3-9-released/
HARVARD
Blog | Sciencx Thursday December 16, 2021 » GSAP 3.9 Released., viewed 2024-03-28T12:11:07+00:00,<https://www.scien.cx/2021/12/16/gsap-3-9-released/>
VANCOUVER
Blog | Sciencx - » GSAP 3.9 Released. [Internet]. [Accessed 2024-03-28T12:11:07+00:00]. Available from: https://www.scien.cx/2021/12/16/gsap-3-9-released/
CHICAGO
" » GSAP 3.9 Released." Blog | Sciencx - Accessed 2024-03-28T12:11:07+00:00. https://www.scien.cx/2021/12/16/gsap-3-9-released/
IEEE
" » GSAP 3.9 Released." Blog | Sciencx [Online]. Available: https://www.scien.cx/2021/12/16/gsap-3-9-released/. [Accessed: 2024-03-28T12:11:07+00:00]
rf:citation
» GSAP 3.9 Released | Blog | Sciencx | https://www.scien.cx/2021/12/16/gsap-3-9-released/ | 2024-03-28T12:11:07+00:00
https://github.com/addpipe/simple-recorderjs-demo