Trying GSAP Out, session 3

In 'Animations session 3' a cog wheel rotated when a button was pressed.
This page will show you how to do it.
We will use a picture of a boy instead of the cogwheel.
The code works with any picture.

The first step is to set the centre of rotation.
This is how you tell gsap to rotate round the centre of the image:

                    
    gsap.set("#boy1", {transformOrigin: "50% 50%"});

The code says to move the centre (the 'origin')
to halfway (50%) across the image
and halfway (50%) down the image.

Next you say how far round to turn.
Lets turn the boy all the way over.
That's 360 degrees!

                    
    gsap.set("#boy1", {transformOrigin: "50% 50%"});
    gsap.to("#boy1", {rotation: "360", duration: 3});

We can add a 'repeat' instruction
so that the picture turns round
as many times as you want.

                    
    gsap.set("#boy2", {transformOrigin: "50% 50%"});
    gsap.to("#boy2", {
        rotation: "360",
        repeat: 3,
        duration: 3});

We can add a new instruction:
ease: 'none'
This tells gsap to turn round at the same speed.
Without this code it slows down and speeds up.
Did you notice this?

                    
    gsap.set("#boy3", { transformOrigin: "50% 50%" });
    gsap.to("#boy3", {
        rotation: "360",
        ease: "none",
        repeat: 3,
        duration: 3});

We can put our code in a timeline.
And add some more tweens if we like.
If we move 'repeat' into the timeline
then the whole timeline repeats.

                    
    gsap.set("#boy4", {transformOrigin: "50% 50%"});
    const tl4 = gsap.timeline({ repeat: 2 });
    tl4.to("#boy4", { x: 50, duration: 0.5 })
       .to("#boy4", {
        rotation: "360",
        ease: "none",
        duration: 3,
    });

We add a pause to our timeline.
We add a button to our html.
We add an 'event listener' to the button.
Each press of the button restarts the timeline.
So then the boy moves and turns over.

                    
    gsap.set("#boy5", { transformOrigin: "50% 50%" });

    const tl5 = gsap.timeline({
              repeat: 1
            });

    tl5.pause();

    tl5.to("#boy5", { x: 100, duration: 0.5 })
       .to("#boy5", {
              rotation: "360",
              ease: "none",
              duration: 2
            });

    rotateBoyBtn.addEventListener("click", (e) => {
              tl5.restart();
            });