Getting started with Animations

Animations can be hard to do.
But, luckily, there is a set of tools that make it easy. Hooray!
The tools are available for free from a group called GreenSock.
Thank you GreenSock!

Using code that other people have written is very common in programming.
Code we haven't written ourselves is called a library.
We use it just like taking books from the library.
Except we don't get fined if we don't return it on time. 😊

The picture below is the logo of the GreenSock group.
I have used their code to make it slide across the page.
Four other things change, can you see them?

Press the "Move the Logo Right" button and watch carefully!
You can use the "Move the Logo Left" to go back to the start.

Move the Logo Right Move the Logo Left

Did you notice;

• the background colour changes,
• the background has square corners to start with but round ones when it stops,
• the logo gets bigger while it is moving, and,
• it has a green border when it has stopped moving.

The changes were all done using this code:

            
            gsap.to("#logo", {  duration: 2,
                                x: 300,
                                background: "purple",
                                borderRadius: "20%",
                                border: "5px solid darkgreen",
                                padding: "30px" });
            
            

All GreenSock code starts with 'gsap.' which stands for 'Green Sock Animation Platform'.
After the full stop is the word 'to'. This means that something on the page will change to some other position, colour or size.
After this opening bracket '(' we say what it is that will change. We can name one thing or many things.
In this example we tell gsap that want to animate the logo by using its id: "#logo"
The '#' sign identifies that we are supplying an id.

After we have said what it is we want to animate we start a list of instructions to gsap.
We put the list in curly brackets like this: "{ ..... }"
The first and most important instruction is how long the animation should last: "duration: 2,"
This means that it will last for 2 seconds.

After that we put the things we want to change.
We could just put x: and a number.
This would just move the logo sideways.
It would go to the right if we put a positive number and left if we put a negative number.
You can put as many things as you want. They will all change at the same time.

In our code club session today you will try it out yourself.