Demo: [INCOMING] A Next.js boilerplate with TailwindCSS Framer Motion, Locomotive Scroll and GSAP Scroll Trigger. A Fork from Samuel Goddard Next Boilerplate.
- Next 11
- Tailwind (With JIT mode enabled)
- Custom PostCSS setup preconfigured to allow for
@importand simple CSS nesting - Framer Motion 4 (With LazyMotion setup for smaller bundle sizes)
- Preact preconfigured instead of React for smaller bundle size*
- SEO preconfigured with next-seo
- Module Aliasing preconfigured with
jsconfig.json - Locomotive Scroll preconfigured for smooth, lerp based page scrolling
- GSAP Scroll Trigger preconfigured for custom scroll animation.
*To remove Preact and switch back to React simply remove the code in next.config.js
- Feature branch with Sanity
- Feature branch with Netlify CMS
-
Clone the repo
git clone https://github.com/tomostudio/next-interactive-starter.git
-
Start developing
Navigate into your new site’s directory and install the local dependencies first, then run the dev command.
cd next-interactive-starter/ yarn yarn run dev -
Open the source code and start editing!
Your site is will be running at
http://localhost:3000
|-- components
|-- container.js *// A simple container component to wrap areas in a max width*
|-- fancyLink.js *// A simple wrapper around `next/link`
|-- footer.js *// Example footer component*
|-- header.js *// Example header component*
|-- layout.js *// Layout component that can be used to wrap your pages in a global layout*
|-- scrolltrigger.js *// A container to enable scrolltrigger interaction*
|-- helpers
|-- seo.config.js *// default SEO configuration helper, imported in `pages/_app.js`*
|-- transitions.js *// re-usable framer motion transition helper with a basic 'fade' transition to get started*
|-- globalscroll.js *// push locomotive scroll event to context or global window event*
|-- context
|-- state.js *// default react context initiation, currently preset to store locomotive scroll event as a context*
|-- pages
|-- _app.js *// Includes default SEO component, Framer motion AnimatePresence & Locomotive Scroll init*
|-- _document.js *// Default Next document component*
|-- about.js
|-- index.js
|-- public *// Next public assets*
|-- styles
|-- _locomotive.css *// custom locomotive scroll styles*
|-- _fonts.css *// custom webfont styles*
|-- _typography.css *// custom typographical styles*
|-- main.css *// Tailwind init and custom css imports*
|-- .gitignore
|-- jsconfig.json *// module aliasing*
|-- postcss.config.js *// Tailwind, CSS import, CSS nesting init*
|-- next.config.js *// Prefer Preact to React*
|-- package.json
|-- README.md
|-- tailwind.config.js