Excited to Dive into React, Next.js, and GSAP!

Today, I’m absolutely thrilled to share that I’ve learned some fantastic new skills! I’ve been diving into React and Next.js, and it feels amazing to be able to build dynamic, modern web applications with these tools. I’m also integrating GSAP for smooth animations and interactions—it’s a game-changer!

The best part? I’ve moved away from WordPress and am now embracing native development (in the true sense!). It’s been such an exciting journey, and I’m finally in control of the entire stack. Starting from the very basics, I set up my React and Next.js environment, ensuring everything was organized right from the start. Here’s how I approached the process:

1. Setting up React and Next.js

I began with a clean slate, installing React and Next.js and configuring the folder structure properly to keep everything organized:

npx create-next-app@latest my-project --typescript

1. Folder Structure

I’ve set up a clear and structured folder layout to keep my project organized as it grows. Here’s what I’ve structured so far:

/app
  ├── /components        # All reusable components
  ├── /pages            # Page-level components, including Home, About, etc.
  ├── /styles           # SCSS/CSS files
  ├── /public           # Static assets like images
  └── /utils            # Utility functions and helpers

By organizing my project like this, I can easily maintain and scale it without getting lost in the code. Everything is modular and easy to find.

1. Integrating GSAP for Smooth Animations

On top of setting up the project and structure, I’ve been integrating GSAP to add dynamic animations to the page. Here’s a sample of how I used GSAP to animate text when it appears on scroll:

import { useEffect } from 'react';
import { gsap } from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

export default function HomePage() {
  useEffect(() => {
    const homeTitle = document.querySelector('.home-intro-top__title');
    const aniTitle = document.querySelector('.home-intro-top__ani');
    const baseTitle = document.querySelector('.home-intro-top__base');

    if (homeTitle && aniTitle && baseTitle) {
      const words = baseTitle.innerText.trim().split(' ');

      // Wrap each word in a div for animation
      aniTitle.innerHTML = words.map(word =>
        `<div class="home-intro-top__word">
          <div class="home-intro-top__word-child">${word}</div>
        </div>`
      ).join(' ');

      // GSAP animation
      const wordElements = aniTitle.querySelectorAll('.home-intro-top__word');
      wordElements.forEach((word, index) => {
        gsap.fromTo(
          word,
          { opacity: 0, y: 50 },
          { opacity: 1, y: 0, delay: index * 0.1, duration: 0.8 }
        );
      });
    }

    ScrollTrigger.refresh();
  }, []);

  return (
    <div className="home-intro-top__title">
      <div className="home-intro-top__ani"></div>
      <div className="home-intro-top__base">Transform Ideas into Fluid Digital Solutions</div>
    </div>
  );
}

1. The Excitement of Native Development

I’ve always wanted to get into native development, and now I feel like I’ve made that transition! Moving away from WordPress and embracing React and Next.js means I get to create custom, scalable web apps from scratch. And what better way to start than by working on my personal homepage?

1. What’s Next?

This is just the beginning. Now that I’ve gotten the hang of React, Next.js, and GSAP, I’m eager to take on more commercial and public projects. I want to build websites that are not only functional but also visually dynamic and user-friendly.

I’m super pumped about what’s coming next, and I can’t wait to challenge myself with more complex projects. These new tools and techniques are opening up endless possibilities, and I’m ready to dive even deeper into native development.