Today, I’m excited to share what I’ve been working on: diving deeper into GSAP (GreenSock Animation Platform) and implementing its features like gsap.utils.random() and gsap.utils.clamp() to create smooth animations. Along the way, I also revised my React project’s file structure for better flow and studied consensus algorithms to expand my knowledge. Let’s break this down!
What I Accomplished
Explored GSAP and its utilities:
- Implemented smooth animations using GSAP.
- Learned about
gsap.utils.random()andgsap.utils.clamp()for dynamic animations.
Improved React project structure:
- Revised the file structure to make components and styles more modular and maintainable.
Studied consensus algorithms:
- Expanded my understanding of distributed systems by exploring various types of consensus algorithms.
Creating the Animated Box
One of the highlights of my work was building an animated box using GSAP. Here’s how it works:
Key Features
- A box animates on button click.
- The animation utilizes GSAP’s random and clamp utilities for dynamic and controlled movement.
HTML Structure
To begin, I created a simple HTML layout:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GSAP Animated Box</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<button id="animateButton">Animate</button>
<div class="box"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Styling with CSS
Here’s how I styled the box and button for a modern look:
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #1e1e1e; /* Dark background */
font-family: Arial, sans-serif;
}
.container {
text-align: center;
}
button {
background: none;
border: 2px solid white;
color: white;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 25px;
margin-bottom: 20px;
}
button:hover {
background-color: white; /* White background on hover */
color: black; /* Black text on hover */
}
.box {
width: 100px;
height: 100px;
background-color: #76c7c0; /* Teal box color */
border-radius: 15px; /* Rounded corners */
}
Adding Animation Logic with GSAP
Here’s where the fun begins! Using GSAP, I implemented animations for the box:
// script.js
const button = document.getElementById('animateButton');
const box = document.querySelector('.box');
// Animate the box on button click
button.addEventListener('click', () => {
gsap.to(box, {
duration: 1,
x: gsap.utils.random(50, 300), // Move to a random position along X-axis
y: gsap.utils.random(50, 300), // Move to a random position along Y-axis
rotation: gsap.utils.random(0, 360), // Rotate to a random angle
scale: gsap.utils.clamp(0.5, 1.5)(Math.random()), // Scale between 0.5 and 1.5
ease: "power3.inOut",
});
});
GSAP Utilities in Action
gsap.utils.random(): Generates a random value between a specified range. For example,gsap.utils.random(50, 300)moves the box to a random position.gsap.utils.clamp(): Ensures a value stays within a defined range. For instance, usinggsap.utils.clamp(0.5, 1.5), the box’s scale remains between 0.5 and 1.5.
Revising React Project File Structure
While working on this, I took time to clean up my React project’s file structure. Here’s how I organized it:
src/
├── components/
│ ├── Button/
│ │ ├── Button.js
│ │ └── Button.css
│ ├── Box/
│ ├── Box.js
│ └── Box.css
├── pages/
│ ├── Home.js
│ ├── About.js
│ └── Contact.js
├── App.js
├── App.css
├── index.js
└── styles/
└── global.css
This structure:
- Keeps components modular.
- Separates concerns for better maintainability.
Studying Consensus Algorithms
Lastly, I dove into consensus algorithms, which are essential in distributed systems. Here’s a quick overview:
- Paxos: A classic algorithm for achieving consensus in distributed networks.
- Raft: Known for simplicity and understandability.
- PBFT (Practical Byzantine Fault Tolerance): Handles up to one-third of malicious nodes.
Final Thoughts
Working with GSAP has been incredibly rewarding. It’s versatile, beginner-friendly, and powerful for creating animations. Whether you’re building a simple project or integrating animations into a larger application, GSAP is a tool worth exploring.