I am going to create a whole NFT Collection Landing Page with ReactJS. Here I have used very few libraries and made a unique design.
For this project, I have only used👇
• Styled-components
• Gsap (For cool scrolling animations)
• Typewriter-Effect
• React-Confetti
• React-Use
Note: This website is only the front-end UI and there is no backend.
Demo Link🖤: http://the-weirdos-sahulnotsodev.vercel.app/
we're going to learn a lot of stuff like,
▶️ Complex Animations in React
▶️ How to create Scrolling effects using Gsap
▶️ How we can leverage advantages of component structure
▶️ How to use confetti in React JS for awesome background effects
▶️ Uses of Lazy and suspense in ReactJS to make components load faster
▶️ How to use different Hooks from react-use
▶️ How to draw SVG path on scroll
gsap (GreenSock Animation Platform)
https://www.npmjs.com/package/gsap
npm i gsap
GSAP is a robust JavaScript toolset that turns developers into animation superheroes. Build high-performance animations that work in every major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, strings, motion paths, generic objects...anything JavaScript can touch! GSAP's ScrollTrigger plugin lets you create jaw-dropping scroll-based animations with minimal code. No other library delivers such advanced sequencing, reliability, and tight control while solving real-world problems on over 11 million sites. GSAP works around countless browser inconsistencies; your animations just work. At its core, GSAP is a high-speed property manipulator, updating values over time with extreme accuracy. It's up to 20x faster than jQuery! See https://greensock.com/why-gsap/ for what makes GSAP so special.
react-confetti
https://www.npmjs.com/package/react-confetti
npm install react-confetti
typewriter-effect
https://www.npmjs.com/package/typewriter-effect
npm i typewriter-effect
Swiper
https://www.npmjs.com/package/swiper
npm i swiper
Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.
Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity.
Normalize.css
npm install normalize.css
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
Top comments (1)
This looks like a great article! 🙌
In fact, the topic of your post would also work really well in the Meta Punk Community too!
MetaPunk Web3 Community 🦙
We’re a community where blockchain builders and makers, web3 devs, and nft creators can connect, learn and share 🦙
Meta Punk is a really cool international NFT and web3 community where artists, web3 developers, and traders can connect, learn, and share exciting discoveries and ideas. 🦙
Would you consider posting this article there too? Because Meta Punk is built on the same platform as DEV (Forem) you can fairly easily copy the Markdown and post it there as well.
Really hope that you'll share this awesome post with the community there and consider browsing the other Forem communities out there!