/nextjs-animations

Discover the world of stunning scroll animations with this Next.js project! Rebuilding part of CodeSandbox's page, this application utilizes the power of Framer Motion, Tailwind CSS, and TypeScript. Experience smooth and captivating animations, interactive UI/UX, and advanced CSS concepts.

Primary LanguageTypeScriptOtherNOASSERTION

Creating scroll animations in Next js with Framer Motion (Only desktop, for now) 🚀

By rebuilding part of CodeSandbox Project's page

Animation

Description🌟

Discover the world of stunning scroll animations with this Next.js project! Rebuilding part of CodeSandbox's page, this application utilizes the power of Framer Motion, Tailwind CSS, and TypeScript. Experience smooth and captivating animations, interactive UI/UX, and advanced CSS concepts. Don't miss out on this extraordinary journey!

Links

Technical specifications ⚡️

  • Next.js 13
  • React 18
  • TypeScript
  • Tailwind CSS
  • Framer Motion
  • Advance CSS concepts

Key Highlights

  • Scroll amazing animations
  • Gradients in mouse pointer
  • Interactive and nice UI/UX

Running this project 🖥️

Run yarn or npm i to install the project. Next run yarn dev or npm run dev to view the project by clicking the link in the terminal.

Project structure

  • The homepage is located in src/pages/index.tsx
  • All animated sections can be found in src/sections
  • Page with gradients can be found in /src/pages/gradientssss or in your browser at /gradientssss.

Enjoy the animations experience! 💙


NOTE: I am NOT affiliated with CodeSandbox, but do think their website is an amazing showcase of Framer Motion's capabilities and a great example for other people to learn from. All of the svg's in /public are owned by CodeSandbox as well as all of the icons in /src/icons, they are only used as educational material here.

Design remains copyrighted by CodeSandbox, it can only be used for educational purposes.

See the LICENSE for more information about reusing this code.