Starting Animation with GSAP: Day 2

Today, I delved deeper into GSAP to enhance user interaction on web pages. I learned how to create a custom cursor effect and animate an SVG path based on mouse movements. Here’s a simple breakdown of what I accomplished:

Custom Cursor Animation

I started by creating a custom cursor that follows the mouse movement and changes when hovering over a specific element.

//HTML Code
<div id="main">
  <div class="cursor"></div>
  <div id="image">Hover over me</div>
</div>
//Css
#main {
  height: 100vh;
  position: relative;
}
.cursor {
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
#image {
  width: 200px;
  height: 200px;
  background-color: lightgrey;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


//Javascript
let crs = document.querySelector(".cursor");
let main = document.querySelector("#main");
let imgDiv = document.querySelector("#image");

main.addEventListener("mousemove", function (e) {
  gsap.to(crs, {
    x: e.x,
    y: e.y,
    duration: 0.6,
  });
});

imgDiv.addEventListener("mouseenter", function () {
  crs.innerHTML = "View more";
  gsap.to(crs, {
    scale: 4,
    backgroundColor: "#ffffff74",
  });
});

imgDiv.addEventListener("mouseleave", function () {
  crs.innerHTML = "";
  gsap.to(crs, {
    scale: 1,
    backgroundColor: "#ffff",
  });
});

Explanation

The cursor element follows the mouse movements within the #main area using GSAP's to method to animate its x and y coordinates.
When hovering over #image, the cursor scales up and changes color, displaying the text "View more".
When the mouse leaves #image, the cursor scales back down and the text disappears.

SVG Path Animation

Next, I animated an SVG path that changes based on mouse movements, giving a dynamic effect.

//HTML
 <div id="string">
      <svg width="1000" height="200">
        <path d="M 10 100 Q 500 100 990 100" stroke="white" fill="transparent"
      </svg>
    </div>

//Javascript
let initialValue = "M 10 100 Q 500 100 990 100";
let finalValue = "M 10 100 Q 500 100 990 100";
let string = document.querySelector("#string");

string.addEventListener("mousemove", function (dets) {
  initialValue = `M 10 100 Q ${dets.clientX} ${dets.clientY} 990 100`;
  gsap.to("svg path", {
    attr: {
      d: initialValue,
    },
    duration: 0.2,
    ease: "power3.out",
  });
});

string.addEventListener("mouseleave", function () {
  gsap.to("svg path", {
    attr: {
      d: finalValue,
    },
    duration: 1,
    ease: "elastic.out(1,0.2)",
  });
});

Explanation

An SVG path is animated based on the mouse position within the #string area.
As the mouse moves, the control point of the quadratic Bezier curve (Q) changes, dynamically altering the path.
When the mouse leaves the area, the path smoothly transitions back to its original shape using a different easing function.

I explored the power of GSAP timelines to create engaging animations for a navigation menu. By using a timeline, I was able to sequence multiple animations and control their timing, creating a smooth and interactive user experience.

let navbar = document.querySelector("#nav i");
let icon = document.querySelector("#full i");
let tl = gsap.timeline();

tl.to("#full", {
  right: 0,
  duration: 0.8,
});

tl.from("#full h3", {
  x: 150,
  duration: 0.5,
  stagger: 0.1,
  opacity: 0,
});

tl.from("#full i", {
  opacity: 0,
  x: 150,
});

tl.pause();

navbar.addEventListener("click", function () {
  tl.play();
});
icon.addEventListener("click", function () {
  tl.reverse();
});

Explanation

In this code, I used GSAP to create a timeline that manages the animation sequence for a navigation menu. The timeline (tl) contains several animation steps:

Slide In the Full Menu: The #full element slides in from the right over 0.8 seconds.
Animate Header Elements: The h3 elements inside #full move in from the right with a staggered effect, each taking 0.5 seconds and fading in as they move.
Animate Icon: The <i> element inside #full fades in and moves from the right.

Key Features

tl.pause(): Pauses the timeline, allowing you to control when the animation starts. This is useful for interactive animations that should only play in response to user actions.
tl.play(): Plays the timeline from its current position. In this example, it starts the animation sequence when the user clicks the navbar element.
tl.reverse(): Reverses the timeline, playing the animations in reverse order. This is triggered when the user clicks the icon element, creating a smooth closing animation for the navigation menu.

Conclusion

Today's learning was an exciting dive into GSAP's capabilities for enhancing interactivity on web pages. By creating a custom cursor and animating an SVG path based on mouse movements, I gained practical skills to make web interactions more engaging and visually appealing. Additionally, I explored the power of GSAP timelines to create coordinated and responsive animations, significantly enhancing the user experience. The ability to pause, play, and reverse animations provides powerful control, making it easy to create interactive elements that respond to user input. This exercise has given me a solid foundation in GSAP timelines and mouse-based animations, and I'm looking forward to exploring more advanced GSAP features in the coming days.

Day 2: Beginning My Animation Journey with GSAP

Custom Cursor Animation

SVG Path Animation

Navbar Animation with GSAP Timeline

Key Features

Conclusion