Today’s new knowledge #7(GSAP)

Today's Overview:

Hello again everyone ❤❤❤! Hope you're all doing well. Today, I decided to focus on front-end development and, as usual, started exploring YouTube for inspiration. I came across a video on creating website animations with GSAP, which caught my interest. I thought it would be a great opportunity to dive into GSAP and learn something new. Here's a summary of what I explored and learned today.

What is GSAP

GSAP (GreenSock Animation Platform) is a powerful JavaScript library for creating high-performance animations for the web. It’s widely used for animating DOM elements, SVG, canvas, WebGL, and more.

so the first concept I learn is Tween.

TWEEN

In GSAP, a tween is a single animation instance that animates a property or set of properties over time.
Methods like gsap.to(), gsap.from(), and gsap.fromTo() are used to create tweens.

gsap.to()

The gsap.to() method in GSAP is used to animate an element or object from its initial state to a specified state.It's one of the most commonly used methods in GSAP for creating smooth transitions. CSS properties Transforms, colors, padding, border radius, GSAP can animate it all! Just remember to camelCase the properties - e.g. background-color becomes backgroundColor.

gsap.to(".box", {
  duration: 1,    
// Animation lasts 1 second
  x: 200,         
// Moves the element 200px on the X-axis
  opacity: 0.5,   
// Fades the element to 50% opacity
});

gsap.from()

The gsap.from() method in GSAP is used to animate an element or object from a defined starting state to its initial state. This is the opposite of gsap.to()

gsap.from(".box", {
  duration: 1.5,
  x: -200,    
// Starts 200px left of its original position
  opacity: 0, 
// Starts with 0% opacity
  ease: "power2.out" 
// Eases out to the current state
});

gsap.fromTo()

The gsap.fromTo() method in GSAP is a versatile way to define both the starting (from) and ending (to) states of an animation.

gsap.fromTo(".box", 
  { x: -200, opacity: 0 }, 
// Starting state: off-screen to the left and invisible
  { x: 200,
 opacity: 1,
 duration: 2,
 ease: "power2.out" }
 // Ending state: on-screen and fully visible
);

Here's a list of the shorthand transforms and some other commonly used properties.

Property	Equivalent CSS	Notes
x: 100	transform: translateX(100px)	Moves element 100px along X-axis
y: 100	transform: translateY(100px)	Moves element 100px along Y-axis
xPercent: 50	transform: translateX(50%)	Moves element 50% along X-axis
yPercent: 50	transform: translateY(50%)	Moves element 50% along Y-axis
scale: 2	transform: scale(2)	Scales element by a factor of 2
scaleX: 2	transform: scaleX(2)	Scales element's width by a factor of 2
scaleY: 2	transform: scaleY(2)	Scales element's height by a factor of 2
rotation: 90	transform: rotate(90deg)	Rotates element 90 degrees
rotation: "1.25rad"	No CSS alternative	Rotates element in radians
skew: 30	transform: skew(30deg)	Skews element 30 degrees
skewX: 30	transform: skewX(30deg)	Skews element along X-axis
skewY: "1.23rad"	No CSS alternative	Skews element along Y-axis in radians
transformOrigin: "center 40%"	transform-origin: center 40%	Sets origin for transformations
opacity: 0	Adjusts the element's opacity	0 for transparent, 1 for opaque
autoAlpha: 0	Shorthand for opacity & visibility	0 hides both visibility & opacity
duration: 1	animation-duration: 1s	Sets animation duration to 1 second
repeat: -1	animation-iteration-count: infinite	Animation repeats infinitely
repeat: 2	animation-iteration-count: 2	Animation repeats twice
delay: 2	animation-delay: 2	Animation starts after 2 seconds
yoyo: true	animation-direction: alternate	Animation alternates direction

gsap.timeline()

The gsap.timeline() method in GSAP allows you to sequence multiple animations in a controlled and coordinated manner. Using a timeline, you can precisely manage the timing and relationships between tweens, making it easier to create complex, synchronized animations.

let tl = gsap.timeline();

tl.to(".box", { x: 100, duration: 1 })
  .to(".circle", { y: 100, duration: 1 }, "-=0.5") // Starts 0.5s before the previous animation ends
  .to(".triangle", { rotation: 180, duration: 1 });

Control Methods
play(): Starts or resumes the timeline.
pause(): Pauses the timeline.
restart(): Restarts the timeline from the beginning.
reverse(): Plays the timeline in reverse.
seek(): Jumps to a specific time in the timeline.
progress(): Sets or gets the progress of the timeline (0 to 1).

Those are the core concepts of GSAP there are also some plugins you can use. like

ScrollTrigger

ScrollTrigger is a GSAP plugin that allows you to trigger animations based on scroll position, creating interactive, scroll-based animations. It's perfect for building scroll-triggered effects like pinning, parallax, or section reveals.

gsap.to(".box", {
  scrollTrigger: {
    trigger: ".box",
    start: "top 75%", // Animation starts when the top of .box reaches 75% of the viewport
    end: "top 25%",   // Animation ends when the top of .box reaches 25% of the viewport
    scrub: true,      // Links the animation progress to scroll progress
    markers: true     // Shows markers for debugging
  },
  x: 200,
  rotation: 360,
  duration: 2
});

});

Using GSAP in a React

First, install GSAP via npm or yarn:

npm install gsap

useGsap hook

The useGsap hook, provided by the GSAP library, is a powerful tool for managing animations in React applications. It simplifies the process of creating and managing animations, ensuring proper cleanup and preventing potential issues.

import React, { useRef } from 'react';
import { useGsap } from '@gsap/react';
import gsap from 'gsap';

function MyComponent() {
  const ref = useRef(null);
  const { contextSafe } = useGsap();

  // Use contextSafe to ensure proper cleanup
  const animate = contextSafe(() => {
    gsap.to(ref.current, {
      x: 200,
      duration: 1,
      ease: 'power2.out'
    });
  });

  return (
    <div onClick={animate} ref={ref}>
      Hello, World!
    </div>
  );
}

those are the things I learned today.