Starter template for parallax effects & smooth scrolling experience. Empower your Nuxt project in no time.

Ivo Dolenc

Last update: Dec 11, 2022

Overview

Nuxt + Locomotive Scroll

Starter template for parallax effects & smooth scrolling experience. Empower your Nuxt project in no time.

See it in action → LIVE DEMO

What's included

Boilerplate provides many pre-configured modules such as

Locomotive Scroll → A smooth-scroll library with powerfull built-in solutions
GSAP → Professional-grade animation for the modern web
Windi CSS → Next generation utility-first CSS framework
LazySizes → High performance and SEO friendly lazy loader for images
PWA module → Zero config PWA solution for Nuxt.js
Font Loader → Simple, modern and lightweight font loader for Nuxt projects
and more...

Quick Start

Clone this repo to your working directory:

$ git clone https://github.com/ivodolenc/nuxt-locomotive.git <project-name>

Move to the project directory:

$ cd <project-name>

Install all dependencies:

$ yarn # or npm install

Build Setup

Start the local dev server:

$ yarn dev # or npm run dev

Static Deployment

Nuxt.js will create a dist/ directory with everything inside ready to be deployed on a static hosting service.

Generate your static application:

$ yarn generate # or npm run generate

Once your application is built you can use the start command to see a production version of your application.

Serve the generated static application from a dist/ directory:

$ yarn start # or npm run start

This is useful for final testing before deploying.

Nuxt Static Boilerplate → A well-organized Nuxt template for creating fast static applications.

License

Locomotive Scroll

MIT License

Nuxt + Locomotive

MIT License

Vite - Vue 2 starter template using composition-api and windiCSS

Vite ⚡ - Vue 2 starter template This starter template will help you to easily create a Vue2 application bundled by the lightning fast build tool calle

173 Dec 30, 2022

🏕 Opinionated Vite Starter Template

6.6k Jan 3, 2023

Dashboard starter template built with Vue 3 and Tailwind CSS.

767 Jan 2, 2023

:star: A Vite 2.x + Vue 3.x + TypeScript template starter

Vite2.x + Vue3.x + TypeScript Starter 在线预览 https://vite-vue3-starter.xpoet.cn

415 Dec 28, 2022

Awrora Starter - Vue JS Landing Page Template

Landing page template built with one of most popular javascript library Vue.JS, Vuetify (Material Design) and Nuxt.JS with SSR.

53 Dec 2, 2022

A simple opinionated Vue3 Starter Template with Vite.js

Logo created with Windcss logo + Icons made by Vectors Market & Pixel perfect from www.flaticon.com Vitesome 🌬 ⛵️ A simple opinionated Vue3 Starter T

160 Jan 4, 2023

⚡️ A Vite powered WebExtension (Chrome, FireFox, etc.) starter template.

⚡️ WebExtension Vite Starter Template

1.7k Jan 4, 2023

A starter template with Vue3 and Cordova. Live Reload on Devices is included!

Vue3Cordova This is a Vue3 + Cordova starter template. You can use it to start build you mobile application with power of Vue3. 🔥 🔥 LIVE RELOAD OF Y

10 Dec 7, 2022

Readily Configured Starter Template to quickly setup Jetstream Inertia Generator

(Laravel + Vite.js + Tailwindcss + Vue3) + JIG CRUD Generator Intro This is a starter template with a ready-made setup of Jetstream Inertia Generator

10 Nov 4, 2022

Comments

ScrollTrigger with Locomotive?

Hey buddy,

Honestly, fantastic work on all this! Quick question, is there anyway to use ScrollTrigger alongside Locomotive scroll? I tried setting it up this way:

this.$gsap.to('[data-project-card]', {
        y: -50,
        opacity: 1,
        ease: 'easeInOut',
        stagger: 0.1,
        scrollTrigger: {
          trigger: '[data-project-overview]',
          scroller: '[data-scroll-container]',
          pin: true,
          end: 'bottom',
          scrub: true
        }
      })

But unfortunately, no luck.

All the best!

opened by Sananes 2