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 ...
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
Watch video Awwwards Worthy Website #2 | Project 01: Scrolly Sticky Background Animations | GSAP Scroll Trigger online without registration, duration hours minute second in high quality. This video was added by user Gravity Coding 28 June 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 2,93 once and liked it 10 people.