Awwwards Worthy Website #2 | Project 01: Scrolly Sticky Background Animations | GSAP Scroll Trigger
Let's take your Awwwards-worthy website to the next level! This is part 2 of our epic project series, and we're diving deep into some UNBELIEVABLE animations!
🔵 If you have any queries, book the live talk session -
https://unstop.com/mentor/thesiyhbrand
Enroll Now In the Live Course 🔴 -
https://gravitycoding.com/register
Join Us on WhatsApp 💚 -
https://whatsapp.com/channel/0029Va9U...
Join Discord 🧑💻 -
/ discord
Instructor - Amarjeet Chaudhary
Awwwards Worthy Website #2 | Project 01: Scrolly Sticky Background Animations | GSAP Scroll Trigger
Source Code - https://github.com/gravity-coding/equ...
----------- Get ready to: ------------
🟧 Master scroll animations with GSAP ScrollTrigger for an immersive user experience 🪄
🟧 Create a mind-blowing background animation using CSS background-attachment that will leave viewers speechless
🟧 Implement a mouseenter event listener to add interactive background color changes on hover
🟧 Witness the magic of image reveal & wrap animations as you scroll
🟧 We'll be using all the best tools of the trade: HTML, CSS, JavaScript, GSAP, and GSAP ScrollTrigger. Buckle up for a front-end development adventure you won't forget!
--------- This video covers: -------------
🟢 Implementing scroll-triggered animations with GSAP ScrollTrigger
🟢 Creating a stunning background animation with CSS background-attachment
🟢 Adding interactivity with a mouseenter event listener
🟢 Building image reveal & wrap animations for an immersive experience
🟢 Understanding responsive design principles to ensure your website looks amazing on all devices
Don't miss out on this epic continuation! Part 1 is already live, so go check it out if you haven't yet.
Link(Part01) - • Awwwards Worthy Website #1 | Project 01: I...
Cred Website Tutorial Link - https://youtube.com/live/gbqmvxdTnd0
This is just the beginning of our Awwwards project journey! Stay tuned for more exciting website builds.
Team Credit -
🧑💻 Content Creator - Amarjeet Chaudhary ( / thesiyhbrand )
📽️ Videography - Sumit Raj
🖥️ Video Editor - Uday Chouhan ( / uday_chauhan_1 )
💡Lighting Setup - Sumit Raj and Mayuri Pawar
📖 Social Media Support - Ritesh Kumar Das
🧑💻 Technical Support - Paramjeet Chaudhary
Reference Website Link - https://gabrielcontassot.com/
🚀 Don't forget to like, subscribe, and hit the notification bell to stay updated on our latest tutorials! Let's dive in and transform your web design game together. Happy coding! ✨
Contact Details -
Website -
https://gravitycoding.com/
Telephone Number -
+91 626 025 9118 (Whatsapp + Calling)
+91 755 359 5566
Gravity Coding on Instagram:
/ gravity.coding
Thank you for watching our video 🙌
Timestamp:-
0:00 - Intro
1:10 - Creating the new section for the scroll
6:15 - Background Attachment Using CSS
10:40 - Creating Scroll Trigger Animation with GSAP
16:40 - Making Image Zoom on Scroll (GSAP)
26:40 - Last Div to Zoom In
28:42 - Changing the Background Color On MouseEnter Event
34:50 - Hiding the Scroll Bar using CSS
35:55 - Outro
#WebDev #FrontEndDev #UI #UX #Microinteractions #interactivedesign #GSAP3 #DescramblerJS #PortfolioWebsite #LandingPage #InteractiveWebsite #BeginnerWebDev #IntermediateWebDev #Code #CreativeCoding #websiteinspiration #GSAPScrollTrigger #CSSBackgroundAttachment #MouseEventListener #ScrollAnimation#BackgroundAnimation #ImageReveal #ImageWrap #IntermediateWebDev