- 99
- 368 870
Taimoor Shahzada
Pakistan
เข้าร่วมเมื่อ 16 ต.ค. 2019
I'm Taimoor Shahzad and I love to code the designs. I have a passion and because of this passion I decided to create this channel and bring concepts and inspirations to web designing.
I have done tons of web designing projects. And here to teach you Web Development, Frontend Development with advance techniques and BackEnd.
I want to you understand how the designs speaks and give you an idea of HTML, CSS and JavaScript.
Subscribe to my channel and strap in and enjoy the ride of creating and coding. Thank you, and I hope you have as much fun watching and learning from my videos as much as I have making them for you !
Interested in opportunity or review contact me at: m.ts131941@gmail.com
I have done tons of web designing projects. And here to teach you Web Development, Frontend Development with advance techniques and BackEnd.
I want to you understand how the designs speaks and give you an idea of HTML, CSS and JavaScript.
Subscribe to my channel and strap in and enjoy the ride of creating and coding. Thank you, and I hope you have as much fun watching and learning from my videos as much as I have making them for you !
Interested in opportunity or review contact me at: m.ts131941@gmail.com
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
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
Thanks bro
welcome back <3
Au top, merci pour ta vidéo, et surtout le partage du contenu. Ça fait plaisir 😉
As always nice content man
Text animation starts from 27:00
bro! onfire this tutorial!
So cool! Please make this for html/css/js🥹🥹🥹
Stunning
Good yaar Taimoor <3
Bro how to fix this navbar sticky on page scrolling time?
Bro can u make videos on nuxt
After a long time bro welcome
Bro you should try Styled Components
Its been a while
😩but im back now
after the animation is completed my elements disappear . can you let me know what is the issue?
works only with black background but anyways nice try 👍👍🏿
Amazing what is the font?
impressive !
What is the font family on the video
you are fucking insane dude, I swear, underrated channel for sure!!
How do I make it so the links don't have a pointerevent before they're actually faded in
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
whats the name of this theme
It's menu minimal Is cool, great job bro❤
award winning masterpiece...
Amazing. I want to learn gsap 😮
you should
I like your design ❤
Awesome!! Thank you bro!
Uff First comment this IS art
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)
Awesome!! Please more videos:)
Uff brooo thanks for your video you are my inspiration, here my like and my comment
🙌
if i refresh the page than gsap animation not working
Welcome again Taimoor! Awesome project! Please more videos :)
please don't stop your content, I love it and it helps me a lot to study ❤
Thanks taimor I learning with you videos, you are best thank ❣️
I just want to fix the content and images after animation.what can i do??
Would like to know more about the "Emmet abbreviations" is this a vs code extension?
This is gold
Could you let me know where to get similar 3d figures from?
I have copied the code as it is but Js file is not loading
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?
Good job bro but side by side if you'll show us what is going on browser that will be much more helpful ❤
Noted
You have amazing work! You need way more subscribers dude wow
Theme ??
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?
Won't the gif increase the loading time?
Bro bring with explanation code man
soon bro, it took time hope so next month
@@TaimoorShahzada Okay bro take your time
Creative as usual 👍👌
how cool it will be if webflow has such feature