How to use scrolltrigger to construct an object? Animating Nezuko

This animation looks pretty amazing but in reality it is pretty pretty easy. GSAP offers srolltrigger plugin which allows us to animate objects into the viewport and trigger animation based on scroll. Here, we not only want to trigger the animation but also connect the movement of elements to our scroll.

Setup

I am using simple html and vanilla js for demonstration purposes. However gsap and scrolltrigger can be used in front-end frameworks like react and vue too.
For setup, we only need to import the gsap and scrolltrigger package using cdn. And link our js and css file.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>

As for html, I would highly recommend using svg instead of an image. For example, here I am animating the eyes, nose, dress and hairband. If I use svg object I don't need to style it using css. If you use image than you have to position each element of the object very carefully for it to resemble a complete object. But with svg each element is already positioned in their respective places.
I cannot post the entire svg here because it's like 350 lines long. But I would share a screenshot of basic layout of the svg which is very important to understand how we are going to animate the svg.
I found this svg in figma community. https://www.figma.com/file/6abCcAz76OF2rigS2G1WXC/nezuko-kamado-(Community)?node-id=0%3A1
This guy is doing a great job.
https://www.figma.com/@sulaiman

As you can see in the above svg, each element like eyes,nose, dress and hairband are grouped and given an id. This will be used to target each element and animate them individually.
Initial setup should look something like this...

Setting up scrolltrigger

First we need to register the scrolltrigger plugin in order for us to use it.
Then we need to create a gsap timeline and pass an object containing scrolltrigger properties.

gsap.registerPlugin(ScrollTrigger);
gsap
  .timeline({
    scrollTrigger: {
      trigger: ".nezuko",
      start: "center center",
      end: "bottom center",
      scrub: true,
      pin: true,
    },
  })

trigger is the object which will trigger the animation. Now it's very crucial that you use the ".nezuko" class in the svg tag itself. If you set the trigger anywhere inside the svg, then the svg will disappear from viewport.
start and end properties define the start and end of animation respectively.
scrub set to true means that animation is dependent on the user scroll.
pin set to true pins the target element and it will stay on viewport till animation is complete.

The trick

The main trick to such animation is that we are not animating to the final object instead we are animating from the final object. Meaning it's quite difficult to construct all elements sequentially and get to the final object. But it is very simple if we define the final object first and animate each element into it.
Of course user will have the previous experience where each element combines to construct the final object on scroll.

gsap.registerPlugin(ScrollTrigger);
gsap
  .timeline({
    scrollTrigger: {
      trigger: ".nezuko",
      start: "center center",
      end: "bottom center",
      scrub: true,
      pin: true,
    },
  })
  .from(".eye", { y: innerHeight * 65.5 })
  .from(".nose", { y: innerHeight * 65.5 })
  .from(".dress", { y: innerHeight * 65.5 })
  .from(".hairband", { y: innerHeight * 65.5 });

That's it , 15 lines of code and you have your scroll animation constructing an object. We set the y value to certain times the innerHeight of viewport and each element animates from that position to the inital position.
Here is our final result...

Keypoints

1.Use svg : I cannot emphasis this more. Using svg will save your valuable time. Resizing each element and getting final object right using css is too much hassle. Also you have to take mobile responsiveness into account. With svg all these are handled.
2.Use medium size svg: The svg I used here is pretty big. 12645px * 16756px is too much. I used it because that's the only one available. If you use such big sizes than you have to multiply innerHeight to some crazy numbers like I have done above. Usually innerHeight multiplied to 1.5 to 2 will do the job.
3.Experiment: We can do pretty amazing things with gsap, scrolltrigger and scrub properties. Experiment with these to find the sweet spot for your animation. Sky is the limit.

There you have it. Constructing sweet Nezuko with scroll animation. Btw.. Demon slayer is awesome. Can't wait for the whole manga to animate. Season 2 is streaming right now 😁.

If you have any suggestion , do let me know in comments. Will you use it in your next project? Is there any other way to achieve the same animation? Waiting for your responses .....