- 147
- 568 455
Gravity Coding
India
Приєднався 19 вер 2021
Hey Designers & Coders 🔥
Here I'm Amarjeet Chaudhary as a UI UX Designer and Full Stack Web Developer who helps you to learn and create your own Modern Web Development.
If you are new to my channel, thank you for visiting the channel.
Some Highlighted Topic Cover -
😃 UI Designs
😇 Adobe XD
🤩 Awwwards Website
😎 Full Stack Web Development
🙃 GSAP Animation
🥳 Modern Web Designing
🙌 App Designing
And more content...
Don't forget to Subscribe to Our Channel 🙏
Stay Happy, Stay Healthy
Gravity Coding
Here I'm Amarjeet Chaudhary as a UI UX Designer and Full Stack Web Developer who helps you to learn and create your own Modern Web Development.
If you are new to my channel, thank you for visiting the channel.
Some Highlighted Topic Cover -
😃 UI Designs
😇 Adobe XD
🤩 Awwwards Website
😎 Full Stack Web Development
🙃 GSAP Animation
🥳 Modern Web Designing
🙌 App Designing
And more content...
Don't forget to Subscribe to Our Channel 🙏
Stay Happy, Stay Healthy
Gravity Coding
Create Interactive Hover Animations with HTML, CSS, JS & React | Beginner Tutorial
Enroll Now In Our Courses -
learn.gravitycoding.com/course-list/
Join Us on WhatsApp -
whatsapp.com/channel/0029Va9UysSEKyZHNAUUJd2o
Instructor - Amarjeet Chaudhary
🚀 In this fun and engaging tutorial, you'll learn how to create an awesome hover animation effect using HTML, CSS, and JavaScript and then take it to the next level with React.js! 🎉
We'll start with the basics-how to build an interactive mask effect that follows your mouse using HTML, CSS, and GSAP (GreenSock Animation Platform). Then, we'll dive into React and show how to do the same thing in a more efficient and scalable way using React hooks like useState and useEffect.
👉 Perfect for beginners who want to level up their web development skills with cool animations and smooth interactions! 🔥
What You'll Learn:
🛠 Setting up animations with GSAP.
🎨 Creating smooth transitions and hover effects.
💡 Implementing hover animations in React with hooks.
✨ BONUS: Learn how to write clean and optimized code for maximum efficiency.
🌟 Don't Miss Out!
Hit the play button and unleash your creativity! Subscribe to our channel to stay updated with the latest web design trends, tips, and tricks. Let's transform ordinary websites into extraordinary masterpieces! 🎉✨
💥 Follow Sahil Saundale - www.linkedin.com/in/sahil-saundale/
Contact Details -
Website -
gravitycoding.com/
Telegram Link -
t.me/gravitycoding
Gravity Coding on Instagram:
gravity.coding
Thank you for watching our video 🙌
#Awwwards #webdesign #HTMLCSSJS #InteractiveWeb #css #html #uidesign #ui
#WebDesignMagic #HTMLCSSJS #TiltEffectTutorial #InteractiveDesign #webdesignmagic #WebDevTrends #CSSAnimation #JavaScriptEffects #AwardWinningDesign #UserExperienceDesign #WebDevTips #CreativeWebDesign #EngagingWebsites #FrontEndDevelopment #text #textreveal #CSS3Tricks #DesignTutorial #WebAnimation #DigitalExperience #GSAP #ScrollTrigger #LenisJS #SmoothScrolling #WebDesign #WebDevelopment #JavaScriptAnimations #ResponsiveDesign #GitHub #frontenddevelopment
#ReactJS #GSAPAnimations #FrontendTutorial #HoverEffects
learn.gravitycoding.com/course-list/
Join Us on WhatsApp -
whatsapp.com/channel/0029Va9UysSEKyZHNAUUJd2o
Instructor - Amarjeet Chaudhary
🚀 In this fun and engaging tutorial, you'll learn how to create an awesome hover animation effect using HTML, CSS, and JavaScript and then take it to the next level with React.js! 🎉
We'll start with the basics-how to build an interactive mask effect that follows your mouse using HTML, CSS, and GSAP (GreenSock Animation Platform). Then, we'll dive into React and show how to do the same thing in a more efficient and scalable way using React hooks like useState and useEffect.
👉 Perfect for beginners who want to level up their web development skills with cool animations and smooth interactions! 🔥
What You'll Learn:
🛠 Setting up animations with GSAP.
🎨 Creating smooth transitions and hover effects.
💡 Implementing hover animations in React with hooks.
✨ BONUS: Learn how to write clean and optimized code for maximum efficiency.
🌟 Don't Miss Out!
Hit the play button and unleash your creativity! Subscribe to our channel to stay updated with the latest web design trends, tips, and tricks. Let's transform ordinary websites into extraordinary masterpieces! 🎉✨
💥 Follow Sahil Saundale - www.linkedin.com/in/sahil-saundale/
Contact Details -
Website -
gravitycoding.com/
Telegram Link -
t.me/gravitycoding
Gravity Coding on Instagram:
gravity.coding
Thank you for watching our video 🙌
#Awwwards #webdesign #HTMLCSSJS #InteractiveWeb #css #html #uidesign #ui
#WebDesignMagic #HTMLCSSJS #TiltEffectTutorial #InteractiveDesign #webdesignmagic #WebDevTrends #CSSAnimation #JavaScriptEffects #AwardWinningDesign #UserExperienceDesign #WebDevTips #CreativeWebDesign #EngagingWebsites #FrontEndDevelopment #text #textreveal #CSS3Tricks #DesignTutorial #WebAnimation #DigitalExperience #GSAP #ScrollTrigger #LenisJS #SmoothScrolling #WebDesign #WebDevelopment #JavaScriptAnimations #ResponsiveDesign #GitHub #frontenddevelopment
#ReactJS #GSAPAnimations #FrontendTutorial #HoverEffects
Переглядів: 1 366
Відео
🚀 Scroll Animation with DOM Manipulation in JavaScript | Scroll Detection🎉
Переглядів 1,3 тис.День тому
In this video, we’re diving into a fun scroll animation effect using basic DOM manipulation with JavaScript! 😎 Learn how to detect scroll direction and apply cool scaling effects to elements as you scroll up or down! ⬆️⬇️ Enroll Now In Our Courses - learn.gravitycoding.com/course-list/ Join Us on WhatsApp - whatsapp.com/channel/0029Va9UysSEKyZHNAUUJd2o Instructor - Amarjeet Chaudhary 🚀 Scroll A...
Text Reveal Effect Using GSAP Scroll Trigger & Smooth Scrolling using Lenis.js | Responsive Tutorial
Переглядів 2,6 тис.День тому
Enroll Now In Our Courses - learn.gravitycoding.com/course-list/ Join Us on WhatsApp - whatsapp.com/channel/0029Va9UysSEKyZHNAUUJd2o Instructor - Amarjeet Chaudhary Text Reveal Effect Using GSAP Scroll Trigger & Smooth Scrolling using Lenis.js | Responsive Tutorial 🔗 Source Code & Live Demo: Check out the full source code on GitHub and explore the live demo to see the animations in action: gith...
Hackathons: Waste of Time or Career Game-Changer? 🤔💻 | Gravity Coding
Переглядів 1,1 тис.28 днів тому
Are hackathons really a waste of time, or are they one of the best ways for students to develop essential skills? In this video, we break down everything you need to know about hackathons and why they can be incredibly valuable for college students, even if you have little to no coding experience! ✅ What is a hackathon and why is it valuable for students? 💡 How hackathons help build real-world ...
🎉 Free Course Detailed Discussion: Modern Frontend Web Development! 🚀
Переглядів 2,4 тис.Місяць тому
Ready to master the art of modern front-end web development? In this comprehensive free course, we'll take you step-by-step through everything you need to know to build stunning, responsive, and interactive websites from scratch! 🛠️ What's Covered: 🟩 HTML & CSS: Learn the building blocks of the web-structure with HTML and design with CSS. 🟩 Responsive Web Design: Make your websites look great o...
👀 Shadow and Blur Effect ✨ | Figma Tutorial | Full Course | 2024 | @gravitycoding
Переглядів 5252 місяці тому
In this video, we'll walk you through step-by-step on how to master shadow and blur effects in Figma. From creating subtle drop shadows to adding depth with blurred backgrounds, you'll learn it all! 💡 Enroll Now In the Live Course 🔴 - gravitycoding.com/register Join WhatsApp Group of Figma Tutorial | 🧑💻Join Now - chat.whatsapp.com/FTyAt148oH0LMXQkZYXwM7 🔵 If you have any queries, book the live...
[ ⏰ 5 Minute Tutorial ] | 🚀 GSAP Responsive Animation Techniques 👨💻 | Quick and Easy 🚀
Переглядів 2,3 тис.2 місяці тому
Welcome to our quick and easy tutorial on making your GSAP animations responsive in just 5 minutes! Whether you're a beginner or a seasoned developer, this guide will help you create stunning animations that look amazing on any device. 📱💻 🔵 If you have any queries, book the live talk session - unstop.com/mentor/thesiyhbrand Enroll Now In the Live Course 🔴 - gravitycoding.com/register Join Us on...
🚀 Master Corner Radius & Union in Figma! 🚀 | Figma Full Course | @gravitycoding
Переглядів 2402 місяці тому
Want to create stunning designs in Figma? 🎨 Learn how to effortlessly use Corner Radius and Union like a pro! 🏆 Enroll Now In the Live Course 🔴 - gravitycoding.com/register Join WhatsApp Group of Figma Tutorial | 🧑💻Join Now - chat.whatsapp.com/FTyAt148oH0LMXQkZYXwM7 🔵 If you have any queries, book the live talk session - unstop.com/mentor/thesiyhbrand Join Us on WhatsApp 💚 - whatsapp.com/chann...
✨ Figma Alignment & Distribution Tutorial ✨ | Full Guide | Figma Full Course | @gravitycoding
Переглядів 2,1 тис.2 місяці тому
Welcome to our complete tutorial on alignment and distribution in Figma! 🎨✨ In this video, we'll dive deep into the essential techniques for aligning and distributing elements in Figma, a powerful design tool used by professionals worldwide. Whether you're a beginner looking to understand the basics or an experienced designer seeking advanced tips, this tutorial has something for everyone. Enro...
Figma Blending Modes: A Comprehensive Tutorial! | Figma Full Course | @gravitycoding
Переглядів 4412 місяці тому
Figma Blending Modes: A Comprehensive Tutorial! | Figma Full Course | @gravitycoding
🌟 Full Figma Course: Mastering Gradient Styles 🌟 | Figma Full Course | @gravitycoding
Переглядів 7312 місяці тому
🌟 Full Figma Course: Mastering Gradient Styles 🌟 | Figma Full Course | @gravitycoding
Mastering Masks in Figma: Complete Step-by-Step | Figma Full Course
Переглядів 3022 місяці тому
Mastering Masks in Figma: Complete Step-by-Step | Figma Full Course
🎨 Figma Tutorial: How to Create Color Styles in Figma | Figma Full Course
Переглядів 4292 місяці тому
🎨 Figma Tutorial: How to Create Color Styles in Figma | Figma Full Course
Master the Fundamentals: Position, Size, Rotation, & Corner Radius in Figma | Figma Full Course
Переглядів 3982 місяці тому
Master the Fundamentals: Position, Size, Rotation, & Corner Radius in Figma | Figma Full Course
Figma Basic Tools | Figma Full Course | IN HINDI | UI UX DESIGN | @gravitycoding
Переглядів 7352 місяці тому
Figma Basic Tools | Figma Full Course | IN HINDI | UI UX DESIGN | @gravitycoding
Figma Overview | The Editor in Figma | @gravitycoding | IN HINDI | UI UX DESIGN | Figma Full Course
Переглядів 1,2 тис.2 місяці тому
Figma Overview | The Editor in Figma | @gravitycoding | IN HINDI | UI UX DESIGN | Figma Full Course
👩💻Announcement | Figma for Beginners | The Power of UI Design | IN HINDI | @gravitycoding
Переглядів 1,5 тис.3 місяці тому
👩💻Announcement | Figma for Beginners | The Power of UI Design | IN HINDI | @gravitycoding
🤯Portfolio Skills Showcase | Text Reveal Effect Using GSAP Scroll Trigger | GSAP ScrollTrigger
Переглядів 3,5 тис.3 місяці тому
🤯Portfolio Skills Showcase | Text Reveal Effect Using GSAP Scroll Trigger | GSAP ScrollTrigger
Awwwards Worthy Website #2 | Project 01: Scrolly Sticky Background Animations | GSAP Scroll Trigger
Переглядів 2,8 тис.3 місяці тому
Awwwards Worthy Website #2 | Project 01: Scrolly Sticky Background Animations | GSAP Scroll Trigger
Intro Effect | Mouse move Parallax Effect Using HTML CSS & JS | Website Tutorial
Переглядів 2,4 тис.3 місяці тому
Intro Effect | Mouse move Parallax Effect Using HTML CSS & JS | Website Tutorial
Level Up Your Website with CRAZY 3D Animated Backgrounds (Few Lines of Code!)
Переглядів 4,4 тис.3 місяці тому
Level Up Your Website with CRAZY 3D Animated Backgrounds (Few Lines of Code!)
Awwwards Worthy Website #1 | Project 01: Interactive Text & GSAP Stagger Animations (HTML, CSS, JS)
Переглядів 3,7 тис.4 місяці тому
Awwwards Worthy Website #1 | Project 01: Interactive Text & GSAP Stagger Animations (HTML, CSS, JS)
Text Reveal Animation | GSAP Responsive JS | HTML | CSS | Awwwards Website Tutorial | हिंदी में
Переглядів 2,1 тис.4 місяці тому
Text Reveal Animation | GSAP Responsive JS | HTML | CSS | Awwwards Website Tutorial | हिंदी में
🧑💻 Create a Wave Effect with Staggers and GSAP | HTML, CSS & JS Tutorial
Переглядів 2,2 тис.5 місяців тому
🧑💻 Create a Wave Effect with Staggers and GSAP | HTML, CSS & JS Tutorial
👀 Dive into 3D Waves with Modern Web Development | Gravity Coding | HTML and CSS
Переглядів 2,6 тис.5 місяців тому
👀 Dive into 3D Waves with Modern Web Development | Gravity Coding | HTML and CSS
Master JavaScript Mouse Drag Effect Tutorial | AWWWARDS-Inspired Web Development Guide
Переглядів 2,9 тис.6 місяців тому
Master JavaScript Mouse Drag Effect Tutorial | AWWWARDS-Inspired Web Development Guide
From Vanilla JS to React: Build an Awwwards-worthy Website (HTML, CSS, JS, GSAP, ScrollTrigger)
Переглядів 4,7 тис.6 місяців тому
From Vanilla JS to React: Build an Awwwards-worthy Website (HTML, CSS, JS, GSAP, ScrollTrigger)
Mastering Framer Motion: Creating Outstanding Animations in React
Переглядів 1,8 тис.6 місяців тому
Mastering Framer Motion: Creating Outstanding Animations in React
CSS Hover Animation Tutorial: Adding Perspective Effect for Cool Visuals!
Переглядів 2,2 тис.6 місяців тому
CSS Hover Animation Tutorial: Adding Perspective Effect for Cool Visuals!
Unleash React's Hidden Power: Shocking Scroll Animations with GSAP!
Переглядів 10 тис.6 місяців тому
Unleash React's Hidden Power: Shocking Scroll Animations with GSAP!
nice video
Thank you bro ☺️
Cursor ai maine use kiya hai .. par bass 15 days ka hi free rehta hai i guess
Yes, but cursor-small par use kar sakte ho aap
@@gravitycoding thanks I'll reinstall it
Yes!! Definately want it. & Brother thanks for your awesome content.
Thank you 🙏
Hi friend!!!! Excellents Jobs!!!!. Make a sakura effects
Ok bro! It's a great idea!
Nice
Thanks 😊
🎉🎉🎉🎉
Thank you
Bhaiya please upload the new videos of figma
Okay
I am not able to do any questions or projects. I understand everything when I watch the tutorial. I feel I am stuck in tutorial hell. Please help me
Start from a small things, just create it and then move to next one. You have to create consistency regarding your projects.
Aag lga di bhai Dhua dhua kr diya Bhai tumne yeah sb Itne aache se sikha kr🔥🔥🔥 ❤❤❤
Thanku Bhai ❤️
vai full website with animation chaiye
Okay bro ☺️
Thanks alot. Lagta hai tum hare sat mujh coding ke samaj ajaige. I am a lot older today leken jab 14 years ka ta tab coding ka bohoy shoq ta ek den coding school gaya ta no admission na he dia kaha school khatam karna hoga first
Thanku dost ❤️
bro witthreact please
Sure mere bhai
kitni bakchodiyan krty ho ap
talented developer
😁♥️✨
done!
Great 😃
nice one
Thank you bro ☺️
done
Sounds like a pro coder 😎♥️
great
Thank you bro ☺️
nice
Thnx
I have encountered a problem. When the upper div and the bottom div are are animated then the center div is visible but its height is 100vh only so if i add more content in center div it does not scrolls down and half the content is not visible how can i solve this problem.
Is it solved or you still stuck?
Ek video react kae sath
Okay
❤🔥❤🔥❤🔥❤🔥❤🔥
✨✨♥️
can anyone help mera jo text hai woh centre mein aa hi nhi rha hai .it is in left only
POOR CONTENT
Is it 1 longshot or in series...?
Playlist
When it will come?
Jld hi UA-cam mai aane wala hai
Can't wait for this animation course, is it free ?
Yes bro ❤️🤗
bhaiya aapke se ek effect ke baare mein poochna hai kaise poochu plz help
Contact on Instagram
@@gravitycoding thik hai bhaiya
@@gravitycoding bhaiya react se kuch tagda banwa do plz
Sikhna hein 🥰
Great 😸
Ap ne jo pehle ke time main fully websites using html css javascript gsap se create ki hain wo react or next.js se karna sikhayein bcz html css se to job hee nahi milti ab 😿
Yes bro, you're right but wo videos unke liye thi jinko basic sikhna h... Without basic aap intermediate and advanced level par nhi ja skte... But I will try to create projects on React JS
@@gravitycoding yes sir you're right but hum to apki video pehle se dekhte hain humari basics clear hain 😊
That sounds like a pro coder 🤗❤️
wowowowowowowowowo\
Thank you bro 🤗❤️
yar please reactJs ma different animations bnao
Ok bro
Awesome..
Thank you ❤️🙏
optimize version: tl.to('.all-skills .skils', { opacity: 1, filter: "blur(0px)", stagger: { each: 0.2, from: "random", },// staggers the animations by 0.2 seconds between each element });
Thank you bro 😊
Dolly chaiwale ka chacha ka ladka lolly codewala😂😅
🤣🤣🤣❤️
@@gravitycoding 😂 Bura mut man na sir 😅
Main to maje leta hu bro ❤️... 🤣🤣 Just Chill and Enjoy and learn
Bhaiya bht kuch sikhne milta h appke videos s. Please make more videos like these
Okay bro ✨🙌
❤
❤️✨
Sir can't you launch a special animation course that contains the Locomotive Js GSAP Js and Three Js other libraries?
I'm also thinking about that. Let me work on that part ♥️✨
@@gravitycoding Think You Sir
@@gravitycodingplease launch that bhaiya.i am eagerly waiting for that... bhaiya ek request hai us course me animation react ke sath sikhana please 🙏🙏🙏
@@gravitycoding sir please UA-cam pr bhi course rkhe ga qk mei Pakistan sea dekta hn aur apka course mujhe double ya triple price ka hojata hai aur payment method bhi nhi hai koi jisea mei apko pay kar sakun hopso ap is cheez pr bhi emphasize dein
Very nice explanation and very informative video
Thank you bro ☺️
Ye to bohut basic ho gaya 😅😅😅
Itna bhi sach nhi bolna tha 😁♥️
sir ye to tik hai per main like about page main jau to ye effect kam kare ga kaya
Try karke to dekho ek baar ☺️✨
@@gravitycoding okh
Thank you bro more video is needed in gsap and framer motion with react
Okay bro ☺️
Wow 😲😲
Thank you ✨
Bhaiya bhut badhiya hai
Thank you bro ☺️
Already done in..js
Are bhai great 😃
Mzza agya bhaiya 😎🩶
😎✨
please could you ma\ke tutorials in english
Okay I will try
Bhaiya iska 6th part kb ayga?
Source code me available hain
Sir Up will launch the Swiper JS course on UA-cam
Okay
Mene apka colddrink wala GSAP video dekh kar reactjs me kiya lekin usme mene tailwind css use kari hai to thoda problem ho raha hai lekin maja aya, please reactjs ke sath GSAP ka video lao
Chalo bro, next video laata hu React JS ke upar