GSAP Guide – Animations on the Website
There are many ways to add some spectacular animations to our site. In this post, we will focus on one of the approaches that will allow you to quickly obtain really interesting visual effects. We will look at the GSAP – GreenSock library, and then discuss the basic concepts and approaches that will allow us to make an eye-catching animation. The version of the library in question in this article is version 3.
What is GSAP?
It is a library that provides us with methods to easily add and manage animations on our website. Most of the functionality is provided for free, but you need a license for some really cool features, such as advanced SVG animations. However, we will focus on the free parts of this library.
Animating DOM elements
The first method we’ll see is gsap.to (). It takes three arguments, the first being the animated element. We can give it in the form of a selector or a DOM element. The second argument takes an object with the configuration of our animation. The third argument is responsible for the position of the animation trigger in relation to the timeline.
When configuring our animation, we can use options such as:
- x – object change in the x axis,
- y – object change along the y axis,
- z – object change along the z axis,
- rotation – changing an object using rotation,
- transformOrigin – change of the pivot point,
- scale – object size change,
- skew – change the size of the object,
- perspective – change of perspective,
- opacity – change the transparency of the object,
- delay – animation delay,
- duration – determines the time in which our animation will be performed,
- Ease – determines the speed at which the animation is performed.
Detailed descriptions and other properties can be found at this address.
Timeline
When you want to compose several animations one after another, it is worth using the gsap.timeline () method. Thanks to it, we can sequence the execution of our animations. Without this method, in order to obtain a similar effect, we had to use the delay property. The timeline approach greatly simplifies our code. On the other hand, the optimization of our code contributes to its easier maintenance.
The gsap.timeline () method takes a configuration object as its first argument, in which we can set the time after which the next animations are to be performed or set the animation looping.
The third argument is responsible for when we want to animate in our animation sequence. Giving the value “- = 1” will cause it to run 1 second before the end of the previous one, while giving the value “+ = 1” will make the animation one second after the previous one.
Animation pace
In order to manipulate the pace of the animation, we can use the “ease” property. The following built-in values are available for us:
- none,
- power1,
- power2,
- power,
- power,
- back,
- elastic,
- bounce,
- rough,
- words,
- steps,
- circ,
- expo,
- livid
All these values and how the elements behave after their application can be checked at this address. We can also use the tool at the link above to create our own pace of the animation.
Various methods of animating
Depending on the effect we want to achieve and the point at which we are going to start our animation, we have methods such as:
- gsap.from (),
- gsap.fromTo (),
- gsap.to ().
Thanks to these options, we are able to produce virtually any effect we want. For example, below is a sample code for the hamburger menu in the star wars version.
Source: https://www.rekinysukcesu.pl/blog/internet/gsap-animacje
