DEV Community: Sarthak Mittal

Guitar - Interactive Musical Experience with SVG and GSAP

Sarthak Mittal — Sat, 15 Jun 2024 06:50:01 +0000

Introduction 🤗

Welcome to my latest web development project where creativity meets technology! I've recently embarked on a fascinating journey to combine visual animation with audio interaction, resulting in an engaging musical experience on the web. This blog post will walk you through the process of creating interactive SVG animations that respond to user actions and play sounds, using GSAP and HTML5 audio.

The Concept 🧠

The inspiration for this project comes from Guitar (musical instruments). The goal was to create virtual strings on a web page that users could "pluck" with their mouse, visually deforming the strings and playing corresponding notes.

Tools and Technologies 🛠

GSAP (GreenSock Animation Platform): A powerful JavaScript library for creating high-performance animations.
HTML5 Audio: For playing sound files in response to user interactions.
SVG (Scalable Vector Graphics): For creating and animating the string visuals.

Setting Up the Project 📐

First, we define the initial and final paths for the SVG strings. Each string is represented as a quadratic Bezier curve in SVG.

let initialPath = "M 0 30 Q 500 30 1000 30";
let finalPath = "M 0 30 Q 500 30 1000 30";
const sounds = ["A", "B", "C", "D", "E", "G"];
let audioElements = [];

We pre-initialize audio elements for each note, ensuring they are ready to play after user interaction:

for (let index = 1; index <= 6; index++) {
    let audio = new Audio(`./sound/${sounds[index - 1]}.mp3`);
    audioElements.push(audio);
}

Animating the Strings

Using GSAP, we animate the SVG path of each string based on mouse movements:

for (let index = 0; index < 6; index++) {
    let audio = new Audio(`./sound/${sounds[index]}.mp3`);
    audioElements.push(audio);
}
for (let index = 1; index <= 6; index++) {
    let string = document.querySelector(`#string${index}`);
    let cord = string.getBoundingClientRect();
    string.addEventListener("mousemove", (event) => {
        console.log("play")
        let initialPath = `M 0 30 Q ${event.clientX - cord.left} ${event.clientY - cord.top} 1000 30`;
        gsap.to(`#string${index} svg path`, {
            attr: { d: initialPath },
            duration: 0.3,
            ease: "power3.out"
        });
    });
    string.addEventListener("mouseleave", () => {
        audioElements[index-1].currentTime =2;
        audioElements[index-1].play()
        gsap.to(`#string${index} svg path`, {
            attr: { d: finalPath }, 
            duration: 0.8,
            ease: "elastic.out(1,0.1)"
        });
    });
}

Conclusion 💭

This project demonstrates the seamless integration of visual and auditory elements on a web page, creating an interactive and engaging user experience. By leveraging GSAP for animations and HTML5 audio for sound playback, we can build sophisticated and responsive web applications.

I hope this walkthrough has inspired you to experiment with SVG animations and audio interactions in your projects. Feel free to reach out with any questions or share your own creations!

LIVE DEMO: Guitar - Interactive Musical Experience
GitHub: github.com/iam-sarthak/guitar

👋Connect with Me

If you enjoyed this project, follow me on LinkedIn for more updates and insights into web development and interactive design.

Happy coding! 😊

Big Text Animation on Scroll

Sarthak Mittal — Thu, 13 Jun 2024 17:05:21 +0000

Today, I embarked on an exciting journey with GSAP (GreenSock Animation Platform) and its powerful ScrollTrigger plugin. Here's a quick rundown of what I learned and how I brought my ideas to life.

Basics of GSAP

GSAP is a robust JavaScript library for creating high-performance animations. I started by animating simple elements, which was surprisingly easy and effective.

Discovering ScrollTrigger

ScrollTrigger, a GSAP plugin, allows you to animate elements based on scroll position. Here are some key properties:

trigger: Select the element to animate.
scroller: Usually set to "body".
start: Define when the animation starts.
end: Define when the animation ends.
markers: Visualize start and end points (useful for debugging).
scrub: Smoothly control animation with scroll (can be a Boolean or a number between 1-5).
pin: Pin the element during the animation.

My Big Text Animation

I created an engaging big text animation that moves as you scroll down the page. Here’s the code and a brief explanation:

gsap.to(".page2 h1", {
    transform: "translateX(-250%)",
    scrollTrigger: {
        trigger: ".page2",
        scroller: "body",
        start: "top 0%",
        end: "top -100%",
        scrub: 2,
        pin: true
    }
});

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Big Scroll Text Animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="page1">
        <h1>Welcome to Big Scroll Text Animation</h1>
    </div>
    <div class="page2">
        <h1>BIG SCROLL ANIMATION</h1>
    </div>
    <div class="page3"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
html, body {
    height: 100vh;
    width: 100vw;
}
body {
    overflow-x: hidden;
}
.page1, .page3 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
}
.page1 { background-color: black; }
.page1 h1 { color: white; }
.page2 {
    background-color: cornsilk;
    height: 100%;
    align-items: center;
}
.page2 h1 {
    color: black;
    font-size: 70vh;
    font-weight: 400;
}
.page3 { background-color: black; }

You can see this animation in action here on CodePen.

Today was a fantastic learning experience, and I'm excited to continue exploring the capabilities of GSAP and ScrollTrigger. Stay tuned for more animations!

DELICIRO: Food Ordering Website

Sarthak Mittal — Wed, 05 Jun 2024 12:21:50 +0000

I'm excited to share my latest project, DELICIRO, a fully functional food-ordering website. This project was a significant step forward in my web development journey, providing me with an opportunity to enhance my skills in CSS and React.js.

Inspiration

The inspiration for DELICIRO came from my love for food and technology. I wanted to create a platform where users could easily browse and order their favorite meals. To ensure I followed best practices, I found a YouTube tutorial that guided me through the systematic way of writing clean and efficient code.

Development Process

Learning from YouTube: I started by following a comprehensive YouTube tutorial. The step-by-step guide was incredibly helpful in understanding the workflow and structure of a professional-level project. It emphasized the importance of writing clean, maintainable code and following a systematic approach to development.
Enhanced CSS Skills: One of my goals with DELICIRO was to improve my CSS skills. The tutorial covered advanced CSS techniques, which allowed me to create a visually appealing and responsive design. I learned how to use Flexbox and Grid more effectively, and I gained insights into creating smooth animations and transitions.
**React.js Implementation: **While I had some prior experience with React.js, this project deepened my understanding of component-based architecture. I learned how to manage state more efficiently and how to use hooks like useState and useEffect to create a dynamic and interactive user exp erience.

Key Features of DELICIRO

User-Friendly Interface: The website boasts a clean and intuitive interface, making it easy for users to navigate through the menu and place orders.
Responsive Design: DELICIRO is fully responsive, ensuring a seamless experience on both desktop and mobile devices.
Dynamic Content: The use of React.js allows the content to update dynamically without the need for page reloads, providing a smooth and fast user experience.

What I Learned

Systematic Coding: The importance of following a structured approach to coding was a key takeaway. It not only makes the code more readable but also easier to debug and maintain.
Advanced CSS Techniques: I improved my CSS skills significantly, learning how to create more sophisticated layouts and designs.
React.js Best Practices: This project enhanced my understanding of React.js, particularly in managing state and creating interactive components.

Future Plans

I plan to continue improving DELICIRO by adding more features such as user authentication, order tracking, and payment integration. Additionally, I aim to explore more advanced CSS and React.js techniques to further enhance the user experience.

Feel free to check out DELICIRO and share your feedback. I’m open to suggestions and collaborations to make this project even better!

Live Demo: DELICIRO

GitHub Repository: DELICIRO Source Code

Note: this website is not complete yet that's just a front home page

Creating DELICIRO has been an incredible learning experience, and I’m excited to see where this journey takes me next. Thank you for reading, and stay tuned for more updates!

Connect-Four Game - Web Game

Sarthak Mittal — Sun, 02 Jun 2024 11:44:54 +0000

Inspiration

Creating interactive and engaging web games has always fascinated me. This time, I took on the challenge of developing the classic Connect Four game using React.js, HTML, and CSS. The primary goal was to enhance my front-end development skills and deepen my understanding of data structures and algorithms.

Demo

Check out the live demo here.

Journey

Developing the Connect Four game was a fun and enlightening experience. Here’s a quick overview of my journey:

Project Overview

Technologies Used: React.js, HTML, CSS
Main Feature: A function named checkWin that checks for the winner in the game.

Key Learnings

Importance of Data Structures: During the development, I realized how crucial data structures are in game development. They not only help in managing the state efficiently but also in optimizing the performance.
Algorithm Optimization: To ensure the game runs smoothly, optimizing the checkWin function was vital. The faster your algorithms, the better the user experience.

Why DSA Matters

The development of this game highlighted the importance of Data Structures and Algorithms (DSA). Efficient algorithms can drastically improve the performance of an application. Understanding and implementing the right data structures helps in managing and optimizing the game state, making the overall user experience smoother and more enjoyable.

What's Next?

I plan to continue refining the game, adding more features, and perhaps even incorporating AI to challenge the players. Feel free to check out the project, play the game, and contribute by adding your own features. The project is open source, and I welcome any enhancements!

Live Demo: Connect Four Game

GitHub Repository: Connect Four Source Code

Feel free to connect with me to discuss this project, potential collaborations, or any insights you might have.

Hanging Man Game

Sarthak Mittal — Fri, 31 May 2024 15:29:28 +0000

Inspiration

Inspired by a cool design I found on Dribbble, I decided to create a web version of the classic "Hanging Man" game. My goal was to not only practice my frontend development skills but also to bring a bit of fun and interactivity to my portfolio.

Demo

You can try the live demo of the game here.
Live Demo

Journey

Creating this game was a great learning experience. Here's how I did it:

Choosing the Tech Stack

I chose React for its component-based architecture, which made it easier to manage the different parts of the game. Vite was used as the build tool for its speed and simplicity, and HTML and CSS were used for the structure and styling of the game.

Building the UI

I started by replicating the design from Dribbble. This involved creating a visually appealing layout with cacti, a cowboy, and the hanging tree. CSS was crucial for achieving the right look and feel.

Implementing the Game Logic

The core functionality of the game revolves around guessing letters. Here’s how I implemented it:

useState(): This hook was used to manage the game state, including the word to guess, the letters guessed, and the number of wrong attempts.
useEffect(): This hook was used to handle side effects, such as checking if the game is won or lost after each guess.

Creating the Questions Database

To make the game more interesting, I used ChatGPT to generate a variety of questions and words. This added a unique touch to the game and ensured a diverse set of challenges for the players.

Challenges and Learning

One of the main challenges was managing the game state efficiently and ensuring the UI updates correctly based on user interactions. Through this process, I gained a deeper understanding of React hooks and state management.

Future Plans

In the future, I plan to:

Add more questions and words to the database.
Implement difficulty levels.
Enhance the UI with animations and sound effects.

Conclusion

Working on this project was incredibly rewarding. It not only sharpened my technical skills but also allowed me to create something enjoyable. I hope this blog inspires you to take on similar projects and explore the fun side of web development.

Thank you for reading! Feel free to try the game and let me know your thoughts.

Buy Some Happiness This Summer! - Web Page

Sarthak Mittal — Thu, 30 May 2024 15:58:52 +0000

This is a submission for Frontend Challenge v24.04.17, CSS Art: June.

Inspiration

This web page was inspired by the joy and carefree spirit of summer. I wanted to create a cheerful and inviting web page that captures the essence of the season. The idea was to design something that not only looks appealing but also brings a smile to anyone who visits. Summer is a time for relaxation, fun, and creating memories, and I wanted my page to reflect these sentiments.

Demo

Creating the "Buy Some Happiness This Summer!" web page was a wonderful journey that allowed me to hone my frontend development skills. Here’s a look at the process and what I learned along the way:

Journey

The first step was to brainstorm and plan the layout. I envisioned a page that would be bright and welcoming, with elements that remind people of summer fun. The page needed to be simple yet visually engaging, so I decided to use a combination of soft colors, playful fonts, and a clean layout.

Designing the Components
I broke the design into several key components:

Header: Featuring the title and a short, inviting introduction.
Preparation Time: Highlighting how effortless it is to enjoy the summer.
Ingredients: Listing the elements that make summer delightful.
Instructions: Providing a fun, step-by-step guide to "buying happiness."
Nutrition Facts: Adding a humorous twist with fictional happiness nutrition facts.

Crafting the Layout

Using HTML and CSS, I focused on creating a responsive design that looks great on both desktop and mobile devices. The goal was to ensure that the page remains visually appealing and easy to navigate regardless of the screen size.

Adding Visual Elements

To make the page more engaging, I included a header image of daisies, which evoke feelings of warmth and positivity. I also chose vibrant colors and cheerful fonts to enhance the overall look and feel of the page.

Lessons Learned

This project was not just about improving my technical skills but also about understanding the importance of user experience and aesthetics in web design. I learned how small details, like the choice of colors and fonts, can significantly impact the overall feel of a webpage. Additionally, working on this project reinforced the importance of planning and breaking down a project into manageable parts.

Future Plans

Moving forward, I plan to continue experimenting with different design techniques and tools to further enhance my frontend development skills. I also hope to explore more complex animations and interactive elements to create even more engaging web experiences.

Working on this project was incredibly rewarding and fun. It pushed me to think creatively and pay attention to the finer details. If you're looking to improve your front-end development skills, I highly recommend taking on similar projects that challenge you to combine technical skills with creative design.