Chapter 2: Getting Started with GSAP

2.3 Getting into GSAP Animations: Examples

Congratulations on reaching this exciting section of Chapter 2, where we'll dive into some hands-on examples of GSAP animations! This part is particularly thrilling because it's the point where we put theory into action. In this section, we will explore a wide range of examples that not only demonstrate the versatility and power of GSAP but also serve to deepen your understanding of its capabilities.

Furthermore, these examples are meant to ignite your creativity and motivate you to embark on your own journey of crafting unique and captivating animations. So, let's roll up our sleeves, immerse ourselves in the world of animation, and bring our ideas to life!

Example 1: Simple Fade-In Animation

Let's start with something simple but fundamental – a fade-in animation. This effect is widely used to smoothly introduce elements on a webpage.

HTML:

<div id="fadeBox"></div>

CSS:

#fadeBox {
    width: 100px;
    height: 100px;
    background-color: blue;
    opacity: 0; /* Start fully transparent */
}

JavaScript:

gsap.to("#fadeBox", {duration: 2, opacity: 1});

Here, we animate the opacity of the #fadeBox from 0 (invisible) to 1 (fully visible) over 2 seconds. This simple GSAP command creates a smooth fade-in effect.

Integrated HTML Code:

<!DOCTYPE html>
<html>
<head>
  <title>GSAP Fade Animation</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/gsap.min.js"></script>
  <style>
    #fadeBox {
      width: 100px;
      height: 100px;
      background-color: blue;
      opacity: 0; /* Start fully transparent */
    }
  </style>
</head>
<body>

  <div id="fadeBox"></div>

  <script>
    gsap.to("#fadeBox", { duration: 2, opacity: 1 });
  </script>

</body>
</html>

Explanation:

HTML Structure:
- A blue box with the ID "fadeBox" is created.
- The opacity: 0 style initially makes it invisible.
CSS Styling:
- The #fadeBox selector styles the box with:
  - Width: 100px
  - Height: 100px
  - Background color: blue
  - Opacity: 0 (fully transparent)
GSAP Animation:
- The gsap.to("#fadeBox", { ... }) code animates the box's opacity to 1 over 2 seconds, making it fade in smoothly.

Key Points:

The box will fade in from transparent to fully visible over 2 seconds when the page loads.
You can customize the animation duration, easing, and other properties to create different fade-in effects.
Consider using GSAP's features for delays, repeat loops, and more advanced animation control.

Example 2: Bouncing Ball Animation

Now let's create something a bit more dynamic - a bouncing ball animation. This example will use GSAP's ease functions to create a natural bouncing effect.

HTML:

<div id="ball"></div>

CSS:

#ball {
    width: 50px;
    height: 50px;
    background-color: red;
    border-radius: 50%; /* Make it round */
    position: absolute;
    bottom: 0;
}

JavaScript:

gsap.to("#ball", {duration: 1, y: -200, ease: "bounce.out", repeat: -1, yoyo: true});

In this animation, we move the #ball element up 200 pixels (y: -200) with a bouncing effect (ease: "bounce.out"). The repeat: -1 and yoyo: true parameters make the animation repeat indefinitely, bouncing up and down.

Integrated HTML Code:

<!DOCTYPE html>
<html>
<head>
  <title>Bouncing Ball Animation</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/gsap.min.js"></script>
  <style>
    #ball {
      width: 50px;
      height: 50px;
      background-color: red;
      border-radius: 50%; /* Make it round */
      position: absolute;
      bottom: 0;
    }
  </style>
</head>
<body>

  <div id="ball"></div>

  <script>
    gsap.to("#ball", {
      duration: 1,
      y: -200,
      ease: "bounce.out",
      repeat: -1,
      yoyo: true
    });
  </script>

</body>
</html>

Explanation:

HTML Structure:
- A red ball with the ID "ball" is created.
- position: absolute and bottom: 0 position it at the bottom of the viewport.
CSS Styling:
- The #ball selector styles the ball with:
  - Width: 50px
  - Height: 50px
  - Background color: red
  - Border-radius: 50% (makes it round)
GSAP Animation:
- The gsap.to("#ball", { ... }) code animates the ball's vertical position:
  - duration: 1: Animation takes 1 second.
  - y: -200: Moves 200 pixels up.
  - ease: "bounce.out": Applies a bouncy easing effect.
  - repeat: -1: Repeats the animation infinitely.
  - yoyo: true: Reverses the animation on each repeat.

Key Points:

The ball will bounce up and down continuously with a bouncy effect.
The easing and repeat options create a lively and engaging animation.
You can customize the animation properties for different bouncing effects and behaviors.
Consider using GSAP's timeline features for more complex bounce sequences or interactions.

Example 3: Side Menu Slide-In

Let's create a more practical example: a slide-in side menu animation. This is a common pattern in web design, where a menu panel slides in from the side.

HTML:

<div id="sideMenu">Menu Content</div>

CSS:

#sideMenu {
    width: 200px;
    height: 100%;
    background-color: #333;
    color: white;
    position: fixed;
    top: 0;
    left: -200px; /* Start off-screen */
}

JavaScript:

gsap.to("#sideMenu", {duration: 0.5, left: 0});

This script animates the left property of the #sideMenu from -200px (off-screen) to 0 (fully visible) in 0.5 seconds, creating a smooth slide-in effect from the left.

Integrated HTML Code:

<!DOCTYPE html>
<html>
<head>
  <title>Sliding Side Menu</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/gsap.min.js"></script>
  <style>
    #sideMenu {
      width: 200px;
      height: 100%;
      background-color: #333;
      color: white;
      position: fixed;
      top: 0;
      left: -200px; /* Start off-screen */
      transition: left 0.5s ease-in-out; /* Add a CSS transition for a smoother effect */
    }
  </style>
</head>
<body>

  <div id="sideMenu">Menu Content</div>

  <script>
    gsap.to("#sideMenu", { duration: 0.5, left: 0 });
  </script>

</body>
</html>

Explanation:

HTML Structure:
- A side menu with the ID "sideMenu" is created.
- It initially starts off-screen at left: -200px.
CSS Styling:
- The #sideMenu selector styles the menu with:
  - Width: 200px
  - Height: 100% (full height of viewport)
  - Background color: dark gray
  - Text color: white
  - position: fixed: Fixed position relative to viewport
  - top: 0: Positioned at the top
  - transition: left 0.5s ease-in-out: Smoother sliding animation
GSAP Animation:
- The gsap.to("#sideMenu", { ... }) code animates the menu's left property to 0, sliding it into view from the left over 0.5 seconds.

Key Points:

The side menu will slide in smoothly from the left when the page loads.
The CSS transition enhances the visual smoothness of the animation.
You can customize the animation duration, easing, and starting position for different slide-in effects.
Consider adding interactive elements (buttons, links) to trigger the animation or control its state.

In summary

These examples are just a glimpse into the vast and exciting world of possibilities that GSAP offers. With GSAP, you have the power to create not only simple fade-ins but also complex and interactive animations that will add a high level of polish and professionalism to your web projects.

These examples serve as your playground, where you can freely experiment with different techniques and parameters to see how they can transform your animations. By actively exploring and tweaking these examples, you will not only deepen your understanding of animation but also enhance your animation skills.

So don't hesitate to let your creativity flow and witness the magic of GSAP as your web animations come to life in the most captivating way possible!

2.3 Getting into GSAP Animations: Examples

Congratulations on reaching this exciting section of Chapter 2, where we'll dive into some hands-on examples of GSAP animations! This part is particularly thrilling because it's the point where we put theory into action. In this section, we will explore a wide range of examples that not only demonstrate the versatility and power of GSAP but also serve to deepen your understanding of its capabilities.

Furthermore, these examples are meant to ignite your creativity and motivate you to embark on your own journey of crafting unique and captivating animations. So, let's roll up our sleeves, immerse ourselves in the world of animation, and bring our ideas to life!

Example 1: Simple Fade-In Animation

Let's start with something simple but fundamental – a fade-in animation. This effect is widely used to smoothly introduce elements on a webpage.

HTML:

<div id="fadeBox"></div>

CSS:

#fadeBox {
    width: 100px;
    height: 100px;
    background-color: blue;
    opacity: 0; /* Start fully transparent */
}

JavaScript:

gsap.to("#fadeBox", {duration: 2, opacity: 1});

Here, we animate the opacity of the #fadeBox from 0 (invisible) to 1 (fully visible) over 2 seconds. This simple GSAP command creates a smooth fade-in effect.

Integrated HTML Code:

<!DOCTYPE html>
<html>
<head>
  <title>GSAP Fade Animation</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/gsap.min.js"></script>
  <style>
    #fadeBox {
      width: 100px;
      height: 100px;
      background-color: blue;
      opacity: 0; /* Start fully transparent */
    }
  </style>
</head>
<body>

  <div id="fadeBox"></div>

  <script>
    gsap.to("#fadeBox", { duration: 2, opacity: 1 });
  </script>

</body>
</html>

Explanation:

HTML Structure:
- A blue box with the ID "fadeBox" is created.
- The opacity: 0 style initially makes it invisible.
CSS Styling:
- The #fadeBox selector styles the box with:
  - Width: 100px
  - Height: 100px
  - Background color: blue
  - Opacity: 0 (fully transparent)
GSAP Animation:
- The gsap.to("#fadeBox", { ... }) code animates the box's opacity to 1 over 2 seconds, making it fade in smoothly.

Key Points:

The box will fade in from transparent to fully visible over 2 seconds when the page loads.
You can customize the animation duration, easing, and other properties to create different fade-in effects.
Consider using GSAP's features for delays, repeat loops, and more advanced animation control.

Example 2: Bouncing Ball Animation

Now let's create something a bit more dynamic - a bouncing ball animation. This example will use GSAP's ease functions to create a natural bouncing effect.

HTML:

<div id="ball"></div>

CSS:

#ball {
    width: 50px;
    height: 50px;
    background-color: red;
    border-radius: 50%; /* Make it round */
    position: absolute;
    bottom: 0;
}

JavaScript:

gsap.to("#ball", {duration: 1, y: -200, ease: "bounce.out", repeat: -1, yoyo: true});

In this animation, we move the #ball element up 200 pixels (y: -200) with a bouncing effect (ease: "bounce.out"). The repeat: -1 and yoyo: true parameters make the animation repeat indefinitely, bouncing up and down.

Integrated HTML Code:

<!DOCTYPE html>
<html>
<head>
  <title>Bouncing Ball Animation</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/gsap.min.js"></script>
  <style>
    #ball {
      width: 50px;
      height: 50px;
      background-color: red;
      border-radius: 50%; /* Make it round */
      position: absolute;
      bottom: 0;
    }
  </style>
</head>
<body>

  <div id="ball"></div>

  <script>
    gsap.to("#ball", {
      duration: 1,
      y: -200,
      ease: "bounce.out",
      repeat: -1,
      yoyo: true
    });
  </script>

</body>
</html>

Explanation:

HTML Structure:
- A red ball with the ID "ball" is created.
- position: absolute and bottom: 0 position it at the bottom of the viewport.
CSS Styling:
- The #ball selector styles the ball with:
  - Width: 50px
  - Height: 50px
  - Background color: red
  - Border-radius: 50% (makes it round)
GSAP Animation:
- The gsap.to("#ball", { ... }) code animates the ball's vertical position:
  - duration: 1: Animation takes 1 second.
  - y: -200: Moves 200 pixels up.
  - ease: "bounce.out": Applies a bouncy easing effect.
  - repeat: -1: Repeats the animation infinitely.
  - yoyo: true: Reverses the animation on each repeat.

Key Points:

The ball will bounce up and down continuously with a bouncy effect.
The easing and repeat options create a lively and engaging animation.
You can customize the animation properties for different bouncing effects and behaviors.
Consider using GSAP's timeline features for more complex bounce sequences or interactions.

Example 3: Side Menu Slide-In

Let's create a more practical example: a slide-in side menu animation. This is a common pattern in web design, where a menu panel slides in from the side.

HTML:

<div id="sideMenu">Menu Content</div>

CSS:

#sideMenu {
    width: 200px;
    height: 100%;
    background-color: #333;
    color: white;
    position: fixed;
    top: 0;
    left: -200px; /* Start off-screen */
}

JavaScript:

gsap.to("#sideMenu", {duration: 0.5, left: 0});

This script animates the left property of the #sideMenu from -200px (off-screen) to 0 (fully visible) in 0.5 seconds, creating a smooth slide-in effect from the left.

Integrated HTML Code:

<!DOCTYPE html>
<html>
<head>
  <title>Sliding Side Menu</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/gsap.min.js"></script>
  <style>
    #sideMenu {
      width: 200px;
      height: 100%;
      background-color: #333;
      color: white;
      position: fixed;
      top: 0;
      left: -200px; /* Start off-screen */
      transition: left 0.5s ease-in-out; /* Add a CSS transition for a smoother effect */
    }
  </style>
</head>
<body>

  <div id="sideMenu">Menu Content</div>

  <script>
    gsap.to("#sideMenu", { duration: 0.5, left: 0 });
  </script>

</body>
</html>

Explanation:

HTML Structure:
- A side menu with the ID "sideMenu" is created.
- It initially starts off-screen at left: -200px.
CSS Styling:
- The #sideMenu selector styles the menu with:
  - Width: 200px
  - Height: 100% (full height of viewport)
  - Background color: dark gray
  - Text color: white
  - position: fixed: Fixed position relative to viewport
  - top: 0: Positioned at the top
  - transition: left 0.5s ease-in-out: Smoother sliding animation
GSAP Animation:
- The gsap.to("#sideMenu", { ... }) code animates the menu's left property to 0, sliding it into view from the left over 0.5 seconds.

Key Points:

The side menu will slide in smoothly from the left when the page loads.
The CSS transition enhances the visual smoothness of the animation.
You can customize the animation duration, easing, and starting position for different slide-in effects.
Consider adding interactive elements (buttons, links) to trigger the animation or control its state.

In summary

These examples are just a glimpse into the vast and exciting world of possibilities that GSAP offers. With GSAP, you have the power to create not only simple fade-ins but also complex and interactive animations that will add a high level of polish and professionalism to your web projects.

These examples serve as your playground, where you can freely experiment with different techniques and parameters to see how they can transform your animations. By actively exploring and tweaking these examples, you will not only deepen your understanding of animation but also enhance your animation skills.

So don't hesitate to let your creativity flow and witness the magic of GSAP as your web animations come to life in the most captivating way possible!

2.3 Getting into GSAP Animations: Examples

Congratulations on reaching this exciting section of Chapter 2, where we'll dive into some hands-on examples of GSAP animations! This part is particularly thrilling because it's the point where we put theory into action. In this section, we will explore a wide range of examples that not only demonstrate the versatility and power of GSAP but also serve to deepen your understanding of its capabilities.

Furthermore, these examples are meant to ignite your creativity and motivate you to embark on your own journey of crafting unique and captivating animations. So, let's roll up our sleeves, immerse ourselves in the world of animation, and bring our ideas to life!

Example 1: Simple Fade-In Animation

Let's start with something simple but fundamental – a fade-in animation. This effect is widely used to smoothly introduce elements on a webpage.

HTML:

<div id="fadeBox"></div>

CSS:

#fadeBox {
    width: 100px;
    height: 100px;
    background-color: blue;
    opacity: 0; /* Start fully transparent */
}

JavaScript:

gsap.to("#fadeBox", {duration: 2, opacity: 1});

Here, we animate the opacity of the #fadeBox from 0 (invisible) to 1 (fully visible) over 2 seconds. This simple GSAP command creates a smooth fade-in effect.

Integrated HTML Code:

<!DOCTYPE html>
<html>
<head>
  <title>GSAP Fade Animation</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/gsap.min.js"></script>
  <style>
    #fadeBox {
      width: 100px;
      height: 100px;
      background-color: blue;
      opacity: 0; /* Start fully transparent */
    }
  </style>
</head>
<body>

  <div id="fadeBox"></div>

  <script>
    gsap.to("#fadeBox", { duration: 2, opacity: 1 });
  </script>

</body>
</html>

Explanation:

HTML Structure:
- A blue box with the ID "fadeBox" is created.
- The opacity: 0 style initially makes it invisible.
CSS Styling:
- The #fadeBox selector styles the box with:
  - Width: 100px
  - Height: 100px
  - Background color: blue
  - Opacity: 0 (fully transparent)
GSAP Animation:
- The gsap.to("#fadeBox", { ... }) code animates the box's opacity to 1 over 2 seconds, making it fade in smoothly.

Key Points:

The box will fade in from transparent to fully visible over 2 seconds when the page loads.
You can customize the animation duration, easing, and other properties to create different fade-in effects.
Consider using GSAP's features for delays, repeat loops, and more advanced animation control.

Example 2: Bouncing Ball Animation

Now let's create something a bit more dynamic - a bouncing ball animation. This example will use GSAP's ease functions to create a natural bouncing effect.

HTML:

<div id="ball"></div>

CSS:

#ball {
    width: 50px;
    height: 50px;
    background-color: red;
    border-radius: 50%; /* Make it round */
    position: absolute;
    bottom: 0;
}

JavaScript:

gsap.to("#ball", {duration: 1, y: -200, ease: "bounce.out", repeat: -1, yoyo: true});

In this animation, we move the #ball element up 200 pixels (y: -200) with a bouncing effect (ease: "bounce.out"). The repeat: -1 and yoyo: true parameters make the animation repeat indefinitely, bouncing up and down.

Integrated HTML Code:

<!DOCTYPE html>
<html>
<head>
  <title>Bouncing Ball Animation</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/gsap.min.js"></script>
  <style>
    #ball {
      width: 50px;
      height: 50px;
      background-color: red;
      border-radius: 50%; /* Make it round */
      position: absolute;
      bottom: 0;
    }
  </style>
</head>
<body>

  <div id="ball"></div>

  <script>
    gsap.to("#ball", {
      duration: 1,
      y: -200,
      ease: "bounce.out",
      repeat: -1,
      yoyo: true
    });
  </script>

</body>
</html>

Explanation:

HTML Structure:
- A red ball with the ID "ball" is created.
- position: absolute and bottom: 0 position it at the bottom of the viewport.
CSS Styling:
- The #ball selector styles the ball with:
  - Width: 50px
  - Height: 50px
  - Background color: red
  - Border-radius: 50% (makes it round)
GSAP Animation:
- The gsap.to("#ball", { ... }) code animates the ball's vertical position:
  - duration: 1: Animation takes 1 second.
  - y: -200: Moves 200 pixels up.
  - ease: "bounce.out": Applies a bouncy easing effect.
  - repeat: -1: Repeats the animation infinitely.
  - yoyo: true: Reverses the animation on each repeat.

Key Points:

The ball will bounce up and down continuously with a bouncy effect.
The easing and repeat options create a lively and engaging animation.
You can customize the animation properties for different bouncing effects and behaviors.
Consider using GSAP's timeline features for more complex bounce sequences or interactions.

Example 3: Side Menu Slide-In

Let's create a more practical example: a slide-in side menu animation. This is a common pattern in web design, where a menu panel slides in from the side.

HTML:

<div id="sideMenu">Menu Content</div>

CSS:

#sideMenu {
    width: 200px;
    height: 100%;
    background-color: #333;
    color: white;
    position: fixed;
    top: 0;
    left: -200px; /* Start off-screen */
}

JavaScript:

gsap.to("#sideMenu", {duration: 0.5, left: 0});

This script animates the left property of the #sideMenu from -200px (off-screen) to 0 (fully visible) in 0.5 seconds, creating a smooth slide-in effect from the left.

Integrated HTML Code:

<!DOCTYPE html>
<html>
<head>
  <title>Sliding Side Menu</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/gsap.min.js"></script>
  <style>
    #sideMenu {
      width: 200px;
      height: 100%;
      background-color: #333;
      color: white;
      position: fixed;
      top: 0;
      left: -200px; /* Start off-screen */
      transition: left 0.5s ease-in-out; /* Add a CSS transition for a smoother effect */
    }
  </style>
</head>
<body>

  <div id="sideMenu">Menu Content</div>

  <script>
    gsap.to("#sideMenu", { duration: 0.5, left: 0 });
  </script>

</body>
</html>

Explanation:

HTML Structure:
- A side menu with the ID "sideMenu" is created.
- It initially starts off-screen at left: -200px.
CSS Styling:
- The #sideMenu selector styles the menu with:
  - Width: 200px
  - Height: 100% (full height of viewport)
  - Background color: dark gray
  - Text color: white
  - position: fixed: Fixed position relative to viewport
  - top: 0: Positioned at the top
  - transition: left 0.5s ease-in-out: Smoother sliding animation
GSAP Animation:
- The gsap.to("#sideMenu", { ... }) code animates the menu's left property to 0, sliding it into view from the left over 0.5 seconds.

Key Points:

The side menu will slide in smoothly from the left when the page loads.
The CSS transition enhances the visual smoothness of the animation.
You can customize the animation duration, easing, and starting position for different slide-in effects.
Consider adding interactive elements (buttons, links) to trigger the animation or control its state.

In summary

These examples are just a glimpse into the vast and exciting world of possibilities that GSAP offers. With GSAP, you have the power to create not only simple fade-ins but also complex and interactive animations that will add a high level of polish and professionalism to your web projects.

These examples serve as your playground, where you can freely experiment with different techniques and parameters to see how they can transform your animations. By actively exploring and tweaking these examples, you will not only deepen your understanding of animation but also enhance your animation skills.

So don't hesitate to let your creativity flow and witness the magic of GSAP as your web animations come to life in the most captivating way possible!

2.3 Getting into GSAP Animations: Examples

Congratulations on reaching this exciting section of Chapter 2, where we'll dive into some hands-on examples of GSAP animations! This part is particularly thrilling because it's the point where we put theory into action. In this section, we will explore a wide range of examples that not only demonstrate the versatility and power of GSAP but also serve to deepen your understanding of its capabilities.

Furthermore, these examples are meant to ignite your creativity and motivate you to embark on your own journey of crafting unique and captivating animations. So, let's roll up our sleeves, immerse ourselves in the world of animation, and bring our ideas to life!

Example 1: Simple Fade-In Animation

Let's start with something simple but fundamental – a fade-in animation. This effect is widely used to smoothly introduce elements on a webpage.

HTML:

<div id="fadeBox"></div>

CSS:

#fadeBox {
    width: 100px;
    height: 100px;
    background-color: blue;
    opacity: 0; /* Start fully transparent */
}

JavaScript:

gsap.to("#fadeBox", {duration: 2, opacity: 1});

Here, we animate the opacity of the #fadeBox from 0 (invisible) to 1 (fully visible) over 2 seconds. This simple GSAP command creates a smooth fade-in effect.

Integrated HTML Code:

<!DOCTYPE html>
<html>
<head>
  <title>GSAP Fade Animation</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/gsap.min.js"></script>
  <style>
    #fadeBox {
      width: 100px;
      height: 100px;
      background-color: blue;
      opacity: 0; /* Start fully transparent */
    }
  </style>
</head>
<body>

  <div id="fadeBox"></div>

  <script>
    gsap.to("#fadeBox", { duration: 2, opacity: 1 });
  </script>

</body>
</html>

Explanation:

HTML Structure:
- A blue box with the ID "fadeBox" is created.
- The opacity: 0 style initially makes it invisible.
CSS Styling:
- The #fadeBox selector styles the box with:
  - Width: 100px
  - Height: 100px
  - Background color: blue
  - Opacity: 0 (fully transparent)
GSAP Animation:
- The gsap.to("#fadeBox", { ... }) code animates the box's opacity to 1 over 2 seconds, making it fade in smoothly.

Key Points:

The box will fade in from transparent to fully visible over 2 seconds when the page loads.
You can customize the animation duration, easing, and other properties to create different fade-in effects.
Consider using GSAP's features for delays, repeat loops, and more advanced animation control.

Example 2: Bouncing Ball Animation

Now let's create something a bit more dynamic - a bouncing ball animation. This example will use GSAP's ease functions to create a natural bouncing effect.

HTML:

<div id="ball"></div>

CSS:

#ball {
    width: 50px;
    height: 50px;
    background-color: red;
    border-radius: 50%; /* Make it round */
    position: absolute;
    bottom: 0;
}

JavaScript:

gsap.to("#ball", {duration: 1, y: -200, ease: "bounce.out", repeat: -1, yoyo: true});

In this animation, we move the #ball element up 200 pixels (y: -200) with a bouncing effect (ease: "bounce.out"). The repeat: -1 and yoyo: true parameters make the animation repeat indefinitely, bouncing up and down.

Integrated HTML Code:

<!DOCTYPE html>
<html>
<head>
  <title>Bouncing Ball Animation</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/gsap.min.js"></script>
  <style>
    #ball {
      width: 50px;
      height: 50px;
      background-color: red;
      border-radius: 50%; /* Make it round */
      position: absolute;
      bottom: 0;
    }
  </style>
</head>
<body>

  <div id="ball"></div>

  <script>
    gsap.to("#ball", {
      duration: 1,
      y: -200,
      ease: "bounce.out",
      repeat: -1,
      yoyo: true
    });
  </script>

</body>
</html>

Explanation:

HTML Structure:
- A red ball with the ID "ball" is created.
- position: absolute and bottom: 0 position it at the bottom of the viewport.
CSS Styling:
- The #ball selector styles the ball with:
  - Width: 50px
  - Height: 50px
  - Background color: red
  - Border-radius: 50% (makes it round)
GSAP Animation:
- The gsap.to("#ball", { ... }) code animates the ball's vertical position:
  - duration: 1: Animation takes 1 second.
  - y: -200: Moves 200 pixels up.
  - ease: "bounce.out": Applies a bouncy easing effect.
  - repeat: -1: Repeats the animation infinitely.
  - yoyo: true: Reverses the animation on each repeat.

Key Points:

The ball will bounce up and down continuously with a bouncy effect.
The easing and repeat options create a lively and engaging animation.
You can customize the animation properties for different bouncing effects and behaviors.
Consider using GSAP's timeline features for more complex bounce sequences or interactions.

Example 3: Side Menu Slide-In

Let's create a more practical example: a slide-in side menu animation. This is a common pattern in web design, where a menu panel slides in from the side.

HTML:

<div id="sideMenu">Menu Content</div>

CSS:

#sideMenu {
    width: 200px;
    height: 100%;
    background-color: #333;
    color: white;
    position: fixed;
    top: 0;
    left: -200px; /* Start off-screen */
}

JavaScript:

gsap.to("#sideMenu", {duration: 0.5, left: 0});

This script animates the left property of the #sideMenu from -200px (off-screen) to 0 (fully visible) in 0.5 seconds, creating a smooth slide-in effect from the left.

Integrated HTML Code:

<!DOCTYPE html>
<html>
<head>
  <title>Sliding Side Menu</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/gsap.min.js"></script>
  <style>
    #sideMenu {
      width: 200px;
      height: 100%;
      background-color: #333;
      color: white;
      position: fixed;
      top: 0;
      left: -200px; /* Start off-screen */
      transition: left 0.5s ease-in-out; /* Add a CSS transition for a smoother effect */
    }
  </style>
</head>
<body>

  <div id="sideMenu">Menu Content</div>

  <script>
    gsap.to("#sideMenu", { duration: 0.5, left: 0 });
  </script>

</body>
</html>

Explanation:

HTML Structure:
- A side menu with the ID "sideMenu" is created.
- It initially starts off-screen at left: -200px.
CSS Styling:
- The #sideMenu selector styles the menu with:
  - Width: 200px
  - Height: 100% (full height of viewport)
  - Background color: dark gray
  - Text color: white
  - position: fixed: Fixed position relative to viewport
  - top: 0: Positioned at the top
  - transition: left 0.5s ease-in-out: Smoother sliding animation
GSAP Animation:
- The gsap.to("#sideMenu", { ... }) code animates the menu's left property to 0, sliding it into view from the left over 0.5 seconds.

Key Points:

The side menu will slide in smoothly from the left when the page loads.
The CSS transition enhances the visual smoothness of the animation.
You can customize the animation duration, easing, and starting position for different slide-in effects.
Consider adding interactive elements (buttons, links) to trigger the animation or control its state.

In summary

These examples are just a glimpse into the vast and exciting world of possibilities that GSAP offers. With GSAP, you have the power to create not only simple fade-ins but also complex and interactive animations that will add a high level of polish and professionalism to your web projects.

These examples serve as your playground, where you can freely experiment with different techniques and parameters to see how they can transform your animations. By actively exploring and tweaking these examples, you will not only deepen your understanding of animation but also enhance your animation skills.

So don't hesitate to let your creativity flow and witness the magic of GSAP as your web animations come to life in the most captivating way possible!

The App is Under a Quick Maintenance

We apologize for the inconvenience. Please come back later

2.3 Getting into GSAP Animations: Examples

Example 1: Simple Fade-In Animation

Example 2: Bouncing Ball Animation

Example 3: Side Menu Slide-In

2.3 Getting into GSAP Animations: Examples

Example 1: Simple Fade-In Animation

Example 2: Bouncing Ball Animation

Example 3: Side Menu Slide-In

2.3 Getting into GSAP Animations: Examples

Example 1: Simple Fade-In Animation

Example 2: Bouncing Ball Animation

Example 3: Side Menu Slide-In

2.3 Getting into GSAP Animations: Examples

Example 1: Simple Fade-In Animation

Example 2: Bouncing Ball Animation

Example 3: Side Menu Slide-In