Trying GSAP out, session 2.

In session one we made a chess piece move across the screen.
Let's have a landing pad appear when the bishop stops moving.
To do this, we need a timeline.
We can create the landing pad using the css we learnt earlier.
We just create the bottom line of a border!
Here's how we do it:

                        
    let tl = gsap.timeline();
    let anim = tl.to( "#bishop", { duration: 2, x: 200, y: 200 })
                 .set( "#bishop", { borderBottom: "5px solid black" });
    anim.play();

There are some new things in the code.

Creating a timeline.
Chaining all the things you want to happen together.
Making the animation run.

Timeline options: you can add instructions into 'let g1 = gsap.timeline();'
You put the instructions inside the timeline brackets:
let g1 = gsap.timeline( {Put the instructions in here} )

To repeat the animation forever: {repeat: -1}
To repeat the animation 4 times: {repeat: 4}
To make the animation go forwards and backwards: {repeat: -1, yoyo: true}
To have a delay between repeats: {repeatDelay: 1}.

If you use 'yoyo=true' then you will need to have a delay between the repeats.
Otherwise it seems that the landing pad isn't drawn.
It is drawn but then it is erased so quickly we don't see it.
Adding a repeatDelay solves this problem. This is the new code:

                        
    let tl = gsap.timeline({repeat: -1, yoyo: true, repeatDelay: 1});
    let anim = tl.to( "#bishop", { duration: 2, x: 200, y: 200 })
                 .set( "#bishop", { borderBottom: "5px solid black" });
    anim.play();