Taimoor Shahzada
Taimoor Shahzada
  • 99
  • 368 870
Responsive Animated Minimal Website using Next.js TailwindCSS and GSAP and host it using Back4App
In this video, we will be creating a Responsive Animated Minimal Agency Website using Next.js, TailwindCSS, and GSAP. We will be using App router and Nextjs 14 to show this up, then animations using GSAP and ScrollTrigger Plugin for Scroll Animations and later in this video, we can host our website on Back4App instead of Vercel.
Hope you like this video.
_____________________________________________________________________
Instagram: link.taimoorshahzada.com/instagram
Github: link.taimoorshahzada.com/github
Linkedin: link.taimoorshahzada.com/linkedin
Website: link.taimoorshahzada.com/site
Timestamps:
Creating Next App: (01:06)
Packages needed: (01:28)
Started Developing: (01:34)
Adding Animations: (25:41)
Hosting on Back4App: (44:16)
Final Masterpiece: (46:44)
#agencywebsite #gsap #TaimoorShahzada #webdevelopment #WebsiteDesign #designideas #introanimation #tailwindcss #htmlcssjavascript #greensock #LandingPage #javascript #nextjs #reactjs #ResponsiveWebsite
มุมมอง: 824

วีดีโอ

Magnetic Effect using NextJS, TailwindCSS and GSAP
มุมมอง 1.8K7 หลายเดือนก่อน
In this video, we are creating award winning interaction on buttons called Magnetic Effect using NextJS, TailwindCSS and GSAP. Hope you like this video and Subscribe to my channel. Instagram: link.taimoorshahzada.com/instagram Github: link.taimoorshahzada.com/github Linkedin: link.taimoorshahzada.com/linkedin Website: link.taimoorshahzada.com/site Timestamps: Creating Next App: (00:30) Install ...
Project Showcase Page Website using HTML & CSS only
มุมมอง 1.4Kปีที่แล้ว
In this video, we will creating a Project Page Website using HTML & CSS only. We are using CSS :hover functionality and CSS transitions to give some life to the page. Hope you enjoyed the video. Like this video and Subscribe to my channel. Source Code: bit.ly/3ruxPjJ Instagram: link.taimoorshahzada.com/instagram Github: link.taimoorshahzada.com/github Linkedin: link.taimoorshahzada.com/linkedin...
Award Winning One Page Website using HTML CSS & GSAP
มุมมอง 2.2Kปีที่แล้ว
Today I will show you, How to create an award-winning one page animated website using HTML CSS & GSAP. It includes an intro loading page for the website with image reveal effect and the vertical marquee animation using CSS only. Hope you enjoyed the video. Like this video and Subscribe to my channel. Original Website: www.palmaragency.co.uk/ Source Code bit.ly/3rHQQiq Instagram: link.taimoorsha...
Animated Agency Website with Intro Animation using GSAP | Award Winning Animation
มุมมอง 2.1Kปีที่แล้ว
Today I will show you, How to create an award-winning intro animation in an Agency Website using GSAP in HTML & CSS. Hope you enjoyed the video. Like this video and Subscribe to my channel. Source Code bit.ly/3EUn3Gw Instagram: link.taimoorshahzada.com/instagram Github: link.taimoorshahzada.com/github Linkedin: link.taimoorshahzada.com/linkedin Website: link.taimoorshahzada.com/site Timestamps:...
GSAP Full Screen Menu Tutorial | Awwwards Rebuild | HTML CSS and GreenSock
มุมมอง 1.8Kปีที่แล้ว
Today I will show you How you can create an award-winning modern minimalistic and futuristic menu in a website using HTML CSS and GSAP. Hope you enjoyed the video. Like this video and Subscribe to my channel. Source Code bit.ly/3Pucte3 Instagram: link.taimoorshahzada.com/instagram Github: link.taimoorshahzada.com/github Linkedin: link.taimoorshahzada.com/linkedin Website: link.taimoorshahzada.c...
Sliding Horizontal Sections on Scroll using HTML CSS GSAP and ScrollTrigger Plugin
มุมมอง 2.1Kปีที่แล้ว
Today I will show you and build a studio landing page sliding horizontal sections on scroll using Greensock and ScrollTrigger plugin. Hope you enjoyed the video. Like this video and Subscribe to my channel. Source Code bit.ly/3Zki0Zn Instagram: link.taimoorshahzada.com/instagram Github: link.taimoorshahzada.com/github Linkedin: link.taimoorshahzada.com/linkedin Website: link.taimoorshahzada.com...
GSAP Studio Landing Page Animation | Awwwards Rebuild | HTML CSS and GreenSock
มุมมอง 2.6Kปีที่แล้ว
Hey pal, Today I will show you and build a studio landing page website using HTML, CSS and GSAP. It's been late from my side but worth it for you guys. Check that out. Hope you enjoyed the video Source Code:bit.ly/3MOx24I Follow my Instagram: link.taimoorshahzada.com/instagram Facebook: link.taimoorshahzada.com/facebook Instagram: link.taimoorshahzada.com/instagram Tiktok: link.taimoorshahzada....
Building 3D NFT Website using No Code Platform - @DoraTool - Part 2/2
มุมมอง 5Kปีที่แล้ว
Hey guys, This is the Part 2 of building a 3D NFT Collection Landing Page Website with 3D model camera animations and scroll animations using no code platform named @DoraTool Here's the link to the product: www.dora.run/ Dora Invitation Link: dora.run/signup?code=taimoorshahzada Part 1: th-cam.com/video/FC-luFcEppo/w-d-xo.html Dora is a no-code design platform like Figma, where we can bulid 3D ...
Building 3D NFT Website using No Code Platform - @DoraTool - Part 1/2
มุมมอง 2.1Kปีที่แล้ว
Hey guys, Today we are building a 3D NFT Collection Landing Page Website with 3D model camera animations and scroll animations using no code platform named @DoraTool Dora is a no-code design platform like Figma, where we can bulid 3D websites without knowing threejs and webgl and we can also do scroll animations with this platform without knowing css or any animation library, and later on, we c...
Ticker Animation using CSS
มุมมอง 2.7Kปีที่แล้ว
In this video, I will tell you about how to create an animated ticker effect on your website using CSS. It's very easy most of my viewers recommend this to create! So here it is. Hope you enjoyed the video Source Code: bit.ly/3v8feb4 Follow my Everyday Coding Journey on Instagram: link.taimoorshahzada.com/instagram Facebook: link.taimoorshahzada.com/facebook Instagram: link.taimoorshahzada.com/...
3D Scroll Effect in Website using GSAP and Scroll Trigger Plugin
มุมมอง 6Kปีที่แล้ว
In this video, I am creating an animation on scrolling where it changes the color of the background on a scroll and looks 3D environment to your website with GSAP. Hope you will like this video. Like and Subscribe! Source Code: bit.ly/3hyFTuC Follow my Everyday Coding Journey on Instagram: link.taimoorshahzada.com/social Facebook: link.taimoorshahzada.com/facebook Instagram: link.taimoorshahzad...
Responsive Music Agency Website in NEXT.JS, TailwindCSS and GSAP - Award Winning Website Rebuild
มุมมอง 10Kปีที่แล้ว
Hey fellas, Nowadays working on many projects and i took soo much inspiration of designs from Award Winning Website like Awwwards and CSSDesignAwards. So now, I am rebuilding award winning music agency site named (sizzer.nl) using NEXTJS TAILWINDCSS and GSAP. Hope you enjoyed it. Like and Subscribe! Source Code: bit.ly/3UwgmAz Follow my Everyday Coding Journey on Instagram: link.taimoorshahzada...
Loading Animation with Glitch Effect in React.js using Tailwind and GSAP
มุมมอง 6K2 ปีที่แล้ว
In this video, I will show you how to create a loading animation with a glitch effect in React.js using Tailwind and GSAP. It's a simple animation in React to show how the animation of GSAP works. Hope you like it! Source Code: bit.ly/3WoOJe3 Follow my Everyday Coding Journey on Instagram: link.taimoorshahzada.com/social Facebook: link.taimoorshahzada.com/face... Instagram: link.taimoorshahzada...
NEW INTRO FOR MY CHANNEL!
มุมมอง 5872 ปีที่แล้ว
Hey Lads, Here is the new intro for the channel. Comments below how it is looking! :) Videos coming soon, just working on some projects. Be ready for the bang. See you soon.
Photographic Loading Animation for Designer Portfolio Website using GSAP
มุมมอง 2.3K2 ปีที่แล้ว
Photographic Loading Animation for Designer Portfolio Website using GSAP
Layered Pinned Sections using GSAP ScrollTrigger Plugin
มุมมอง 4.8K2 ปีที่แล้ว
Layered Pinned Sections using GSAP ScrollTrigger Plugin
Interactive Responsive Contact Page Website using HTML and CSS
มุมมอง 2.2K2 ปีที่แล้ว
Interactive Responsive Contact Page Website using HTML and CSS
Curtain Effect Page Transition using GSAP and SVG Morph
มุมมอง 7K2 ปีที่แล้ว
Curtain Effect Page Transition using GSAP and SVG Morph
Detailed Card Animation using HTML CSS & GSAP
มุมมอง 3.5K2 ปีที่แล้ว
Detailed Card Animation using HTML CSS & GSAP
Interactive Split Menu Navigation in Website using HTML CSS & GSAP
มุมมอง 4.1K2 ปีที่แล้ว
Interactive Split Menu Navigation in Website using HTML CSS & GSAP
NFT Landing Page Website using HTML CSS & GSAP
มุมมอง 7K2 ปีที่แล้ว
NFT Landing Page Website using HTML CSS & GSAP
Text Reveal Animation on scroll using GSAP ScrollTrigger Plugin and Smooth Scrollbar
มุมมอง 16K2 ปีที่แล้ว
Text Reveal Animation on scroll using GSAP ScrollTrigger Plugin and Smooth Scrollbar
Add Interactive Sick Animations and Motion Graphics in Website using LottieFiles
มุมมอง 1.6K2 ปีที่แล้ว
Add Interactive Sick Animations and Motion Graphics in Website using LottieFiles
Glitch Effect Text Animation using CSS only
มุมมอง 1.6K2 ปีที่แล้ว
Glitch Effect Text Animation using CSS only
Responsive Complete Landing Page Website with Full Screen Overlay Menu using HTML, CSS & GSAP
มุมมอง 2.9K2 ปีที่แล้ว
Responsive Complete Landing Page Website with Full Screen Overlay Menu using HTML, CSS & GSAP
Hover Interaction Project Portfolio Website with Momentum Smooth Scroll with GSAP and SmoothScroll
มุมมอง 2.4K2 ปีที่แล้ว
Hover Interaction Project Portfolio Website with Momentum Smooth Scroll with GSAP and SmoothScroll
Responsive Music Album or Track Landing Page Website using HTML and Tailwind CSS
มุมมอง 1.5K2 ปีที่แล้ว
Responsive Music Album or Track Landing Page Website using HTML and Tailwind CSS
Website Loading Animation using HTML, CSS and GSAP
มุมมอง 3.3K2 ปีที่แล้ว
Website Loading Animation using HTML, CSS and GSAP
Gallery Landing Page Website using HTML, CSS and GSAP
มุมมอง 3.2K2 ปีที่แล้ว
Gallery Landing Page Website using HTML, CSS and GSAP

ความคิดเห็น

  • @christom6017
    @christom6017 2 วันที่ผ่านมา

    Thanks bro

  • @TrìnhHồHuyĐức
    @TrìnhHồHuyĐức 23 วันที่ผ่านมา

    welcome back <3

  • @julesvincent8827
    @julesvincent8827 หลายเดือนก่อน

    Au top, merci pour ta vidéo, et surtout le partage du contenu. Ça fait plaisir 😉

  • @galactusclb5733
    @galactusclb5733 หลายเดือนก่อน

    As always nice content man

  • @deadpoolzrx5235
    @deadpoolzrx5235 หลายเดือนก่อน

    Text animation starts from 27:00

  • @israx2
    @israx2 4 หลายเดือนก่อน

    bro! onfire this tutorial!

  • @NataliaRyasnyanskaya
    @NataliaRyasnyanskaya 5 หลายเดือนก่อน

    So cool! Please make this for html/css/js🥹🥹🥹

  • @michalbartosz4878
    @michalbartosz4878 5 หลายเดือนก่อน

    Stunning

  • @SharjeelAfzaal-yl4ll
    @SharjeelAfzaal-yl4ll 5 หลายเดือนก่อน

    Good yaar Taimoor <3

  • @nidonjose7902
    @nidonjose7902 6 หลายเดือนก่อน

    Bro how to fix this navbar sticky on page scrolling time?

  • @devoxygen7395
    @devoxygen7395 7 หลายเดือนก่อน

    Bro can u make videos on nuxt

  • @devoxygen7395
    @devoxygen7395 7 หลายเดือนก่อน

    After a long time bro welcome

  • @marcaopenas7329
    @marcaopenas7329 7 หลายเดือนก่อน

    Bro you should try Styled Components

  • @kingpamz
    @kingpamz 7 หลายเดือนก่อน

    Its been a while

  • @ahmadkhan3227
    @ahmadkhan3227 9 หลายเดือนก่อน

    after the animation is completed my elements disappear . can you let me know what is the issue?

  • @ask-wj2pf
    @ask-wj2pf 10 หลายเดือนก่อน

    works only with black background but anyways nice try 👍👍🏿

  • @KordiSong
    @KordiSong 10 หลายเดือนก่อน

    Amazing what is the font?

  • @mandeepyadav7253
    @mandeepyadav7253 11 หลายเดือนก่อน

    impressive !

  • @frontendwithxurshid
    @frontendwithxurshid ปีที่แล้ว

    What is the font family on the video

  • @EmperorAlles
    @EmperorAlles ปีที่แล้ว

    you are fucking insane dude, I swear, underrated channel for sure!!

  • @bennisa8102
    @bennisa8102 ปีที่แล้ว

    How do I make it so the links don't have a pointerevent before they're actually faded in

    • @TaimoorShahzada
      @TaimoorShahzada ปีที่แล้ว

      first display: none the links when the animation completes set links to default display with duration .1 and then put that link animation on it

  • @saribjawadd
    @saribjawadd ปีที่แล้ว

    whats the name of this theme

  • @elbromas12459
    @elbromas12459 ปีที่แล้ว

    It's menu minimal Is cool, great job bro❤

  • @sympatyklego2537
    @sympatyklego2537 ปีที่แล้ว

    award winning masterpiece...

  • @jezza9774
    @jezza9774 ปีที่แล้ว

    Amazing. I want to learn gsap 😮

  • @elbromas12459
    @elbromas12459 ปีที่แล้ว

    I like your design ❤

  • @berkipekoglu
    @berkipekoglu ปีที่แล้ว

    Awesome!! Thank you bro!

  • @elbromas12459
    @elbromas12459 ปีที่แล้ว

    Uff First comment this IS art

  • @higlightsmania8821
    @higlightsmania8821 ปีที่แล้ว

    Can u make kind of transition effects from one page to different like project showcase using your curtains effect video or something cool.. It'll so much help(p.s no video on TH-cam on that i guess)

  • @berkipekoglu
    @berkipekoglu ปีที่แล้ว

    Awesome!! Please more videos:)

  • @elbromas12459
    @elbromas12459 ปีที่แล้ว

    Uff brooo thanks for your video you are my inspiration, here my like and my comment

  • @hetpatel5329
    @hetpatel5329 ปีที่แล้ว

    if i refresh the page than gsap animation not working

  • @berkipekoglu
    @berkipekoglu ปีที่แล้ว

    Welcome again Taimoor! Awesome project! Please more videos :)

  • @euuNeguinho
    @euuNeguinho ปีที่แล้ว

    please don't stop your content, I love it and it helps me a lot to study ❤

  • @elbromas12459
    @elbromas12459 ปีที่แล้ว

    Thanks taimor I learning with you videos, you are best thank ❣️

  • @TansiBhandari
    @TansiBhandari ปีที่แล้ว

    I just want to fix the content and images after animation.what can i do??

  • @BlackRazzberryRevelers
    @BlackRazzberryRevelers ปีที่แล้ว

    Would like to know more about the "Emmet abbreviations" is this a vs code extension?

  • @Taebri000
    @Taebri000 ปีที่แล้ว

    This is gold

  • @tenemus9624
    @tenemus9624 ปีที่แล้ว

    Could you let me know where to get similar 3d figures from?

  • @nimishpandey2693
    @nimishpandey2693 ปีที่แล้ว

    I have copied the code as it is but Js file is not loading

  • @sjord01
    @sjord01 ปีที่แล้ว

    Hey good stuff. Just watched this in 2x speed just to see what effects it has... just curious if your source code is screen responsive?

  • @ritikmanta0028
    @ritikmanta0028 ปีที่แล้ว

    Good job bro but side by side if you'll show us what is going on browser that will be much more helpful ❤

  • @mr.shroom4280
    @mr.shroom4280 ปีที่แล้ว

    You have amazing work! You need way more subscribers dude wow

  • @manjhss
    @manjhss ปีที่แล้ว

    Theme ??

  • @FriendsExplanation
    @FriendsExplanation ปีที่แล้ว

    Hey, the tutorial is awsome . But, I'm getting scroll on x-axis. Even after putting overflow: hidden. It's not working. Will u help me out?

  • @Chiragsanikam.
    @Chiragsanikam. ปีที่แล้ว

    Won't the gif increase the loading time?

  • @learncode5110
    @learncode5110 ปีที่แล้ว

    Bro bring with explanation code man

    • @TaimoorShahzada
      @TaimoorShahzada ปีที่แล้ว

      soon bro, it took time hope so next month

    • @learncode5110
      @learncode5110 ปีที่แล้ว

      @@TaimoorShahzada Okay bro take your time

  • @mohamedlabide4411
    @mohamedlabide4411 ปีที่แล้ว

    Creative as usual 👍👌

  • @yiniyang9425
    @yiniyang9425 ปีที่แล้ว

    how cool it will be if webflow has such feature