Making GSAP Draggable | AWWWARDS Website | HTML CSS JavaScript | @gravitycoding

Enroll Now In the Live Course -

Source Code Link -

Making GSAP Draggable | AWWWARDS Website | HTML CSS JavaScript | Modern Web Development

Instructor - Amarjeet Chaudhary

In this exciting tutorial, join us as we dive into the world of web development and design to create a stunning personal portfolio website. Whether you're a beginner or an experienced developer looking to enhance your skills, this video has something for everyone.

We'll start by building the foundation of our website using HTML, crafting a clean and organized structure for our portfolio. Next, we'll harness the power of CSS to style our website, making it visually appealing and engaging for visitors. With CSS keyframes, we'll unleash a range of eye-catching animations, bringing our portfolio to life with smooth transitions and effects.

But why stop there? We'll take things up a notch by incorporating GSAP (GreenSock Animation Platform) into our project. GSAP is a powerful JavaScript library that enables us to create advanced animations with ease. You'll learn how to utilize GSAP to add dynamic movement, stunning parallax effects, and captivating interactive elements to your website.

In the video, we made draggable using GSAP's draggable function. The type property specifies that dragging is allowed in both the horizontal (x) and vertical (y) directions. The bounds property is set to "window" to restrict the dragging within the window boundaries. The snap method can be used to add snapping behavior to specific targets if desired.

Throughout the video, we'll explain the concepts behind each step and provide helpful tips and tricks along the way. By the end of this masterclass, you'll have an impressive personal portfolio website that showcases your skills and creativity, leaving a lasting impression on potential clients or employers.

So, whether you're looking to build your own personal portfolio website or simply want to expand your web development skills, join us on this thrilling journey as we create a visually stunning and animated masterpiece using HTML, CSS, and JavaScript. Get ready to level up your web design game!

Previous Video -
👉 Create Stunning Scroll Animations with GSAP -

👉 3D Animation Using HTML, CSS & JS | GSAP -

👉 Create Awwwards Website | Hover Animations with JavaScript -

👉 State Level Hackathon Project 😍 (Playlist) -

Contact Details -

Website -

Telegram Link -

Gravity Coding on Instagram:

Thank you for watching our video 🙌

Song: Konqeson - Rise
Music provided by Vlog No Copyright Music.

web development, web design, portfolio website, HTML, CSS, JavaScript, Animation, CSSKeyframes, GSAP, WebAnimation, WebDesignInspiration, CodeTutorial, FrontEndDevelopment, InteractiveWebsite, CreativeDesign, DigitalPortfolio, UserExperience, UIAnimation, ResponsiveDesign, WebDeveloperTips, modern web development course, modern web development tutorial, html css projects for beginners, html css animation tutorial, html css animated landing page, gsap animation, awwwards website tutorial, awwwards website design, awwwards website, hackathon, amarjeet chaudhary menu, scrolling animation, Scroll Animations with GSAP, html css and js, HTML, CSS, JavaScript, web design, gsap, scroll trigger gsap

[RobinSingh-wkqv]

Super video sir, please make more videos like that.
Your channel is the one on whole youtube which made me understand GSAP.

[Fullstackdesigners]

00:01 Creating an animation with GSAP Draggable and AWWWARDS website

01:46 The video is about creating a draggable element using HTML, CSS, and JavaScript.

05:36 Creating a draggable element on the AWWWARDS website using GSAP

07:39 Making GSAP Draggable

11:26 Creating draggable elements using GSAP

13:12 Creating a draggable element using GSAP

16:45 Creating a draggable element using GSAP

18:20 Create draggable elements using GSAP

22:01 Selecting elements using hashtags and creating documents

23:52 Finding the position of an element and comparing it

27:10 Implementing draggable functionality using GSAP library

28:44 Changing colors in GSAP Draggable

32:31 Demonstrated how to customize the appearance and position of an element in GSAP draggable

34:39 Learn how to rotate elements in GSAP using JavaScript

Crafted by Merlin AI.

[NeelakshiSachdeva]

Can you make a full tutorial of this website. It was crazyyyy.

[chiragchaudhary]

Bhaiya yeh text hide effect joo ki es draggable circle ko move karne par milta hai kese banega please make a video on it or tell me . And thanks for uploading these videos from the bottom of heart ❤

[VijaySinha]

Maza aa gya bhaiya 🎉🎉 aisa he aur videos 📸 bnate rhiye keep going 💪🚀

[Teammillion-hx]

Just Awesome brother. ❤

Please make full website with some cool effect like this one.

Thank you 💕

[pareshkamaliya]

Excellent video. Just one small suggestion: if you could explain the debugging part where the draggable function was not working properly, it would be great.

[manish]

Sir, I just wanted to ask, where can I find a background video like this? The one with the boat. please

[mayankpardhaan]

Bhai great content koi social media app yah koi e-commerce app create kro with features ho sake to html css js me Api ke saath kaafi help ho jayegi 👍

[acupoftea]

?Can you Tell me sir the roadmap of animated websites ❤

[manojkumar-esi]

can i know where did you get this type of video like ship 3d video

[irfansaeedkhan]

yeh full project bnayein sir, from start to end

[amandixit]

Resume mein konsa project apki channel se sikh kar daalna shi rahega kam time mein sirf html css and js basic aata ho toh

[hemantsharma-xfub]

mera drag krne pe nahi ho raha h function run just window pe thoda sa movement kru tabhi ho jata h

[lovezambre]

awesome content brother
can you please make it hole website ❤ ❤ ❤

[kaushalkhantwal]

Bro meri video single hi ari h jese apki do videos h na mere usme ni ara me abhi apki video dekhra tha or isko bnara tha to ni ara tb ...ese kese

[pagellarki-qw]

bhai vedio kaha sy download karain gy..?

[BjornCogxgoc]

How can I use it with image sequences? Can you help me? Thanks.

[psw]

how to make the rect1 snap to rect2's position when they overlap, just like the original site?

[BjornCogxgoc]

Amazing! 😮
How do I replace the video with a png image sequence?