Anime JS equivalent for pinned scroll observer?

[monolithMktg]

How would one make this sticky effect in Anime?
Do I need to manually have position: sticky elements lined up in CSS and also give the container a huge height in styling?

let tl = gsap
.timeline({
scrollTrigger: {
trigger: "#cont",
start: "top top",
scrub: true,
pin: true, // sticky caused by this param
end: "bottom+=3000px",
markers: true
}
})

[juliangarnier]

There is no built-in sticky helper on the onScroll method, but syncing sticky positioned elements with scroll animation is relatively straight forwards with Anime.js:

.sticky-container {
  height: 400lvh;
}

.sticky-content {
  position: sticky;
  top: 0;
}

animate('.sticky-content .square', {
  rotateY: 360,
  autoplay: onScroll({
    target: '.sticky-container',
    enter: 'top top',
    leave: 'bottom bottom',
    sync: 1,
    debug: true,
  }),
})

You can see a live example here: https://codepen.io/juliangarnier/pen/RNwvWGe?editors=0110

[monolithMktg]

Thanks a lot @juliangarnier . What a beautiful demo!