Starter template for parallax effects & smooth scrolling experience

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

  1. Clone this repo to your working directory:
$ git clone https://github.com/ivodolenc/nuxt-locomotive.git <project-name>
  1. Move to the project directory:
$ cd <project-name>
  1. 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.

Related

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

License

Locomotive Scroll

MIT License

Copyright (c) Locomotive

Nuxt + Locomotive

MIT License

Copyright (c) Ivo Dolenc

You might also like...
Customize the scrolling position on route navigation. Especially hash mode.

vue-scroll-behavior Customize the scrolling position on route navigation IE / Edge Firefox Chrome Safari Opera iOS Android IE9+, Edge ✓ ✓ ✓ ✓ ✓ ✓ Tabl

:beginner:A simple, seamless scrolling for Vue.js vue无缝滚动component

vue-seamless-scroll A simple, Seamless scrolling for Vue.js Features Initial configuration support Compatible with multiple platforms Multi-technology

⌨️ A Safari browser extension, use keyboard control browser jumps, scrolling, switching tabs and more. support iPadOS and macOS

Support Keyboard Key Description k Scroll up j Scroll down u Fast scroll up d Fast scroll down h Scroll left l Scroll right f Highlight shift Open lin

Vue component that provides content scrolling and zooming using mouse events or two fingers pinch on a mobile devices
Vue component that provides content scrolling and zooming using mouse events or two fingers pinch on a mobile devices

vue-pinch-scroll-zoom Vue component that provides content scrolling and zooming using mouse events or two fingers pinch on a mobile devices example: h

Component that customizes the scroll and inserts shadow when scrolling exists
Component that customizes the scroll and inserts shadow when scrolling exists

Vue Scroll Shadow • • Component that customizes the scroll and inserts shadow when scrolling exists Installation NPM npm i vue-scroll-shadow # or yarn

⚡️ Blazing fast scrolling for any amount of data
⚡️ Blazing fast scrolling for any amount of data

vue-virtual-scroller Blazing fast scrolling of any amount of data | Live demo | Video demo For Vue 3 support, see here 💚️ Become a Sponsor Sponsors T

Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

A Vue.js directive for body scroll locking without breaking scrolling of a target element.

v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

A simple web component (Vue.js = 3.2) that provides infinite scrolling to display a large array of data one element at a time

infinite-scroller-comp infinite-scroller-comp is a Vue.js (=3.2) web component that provides a content area and an associated vertical scroll bar. Th

Comments
  • ScrollTrigger with Locomotive?

    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
Releases(v1.0.0)
Owner
Ivo Dolenc
Freelance Creative Developer
Ivo Dolenc
Lightweight Vue plugin for smooth-scrolling extended from vue2-smooth-scroll.

Vue3 Smooth Scroll Lightweight Vue plugin for smooth-scrolling extended from vue2-smooth-scroll. For simple use-cases, the native scroll-behavior CSS

laineus 23 Aug 16, 2022
Lightweight Vue plugin for smooth-scrolling.

Vue Smooth Scroll Lightweight Vue plugin for smooth-scrolling. For simple use-cases, the native scroll-behavior CSS property (working draft) may be en

xlaoyu 12 Jun 7, 2022
🍹 Next-gen compact native smooth scrolling components for Vue 3

?? Next-gen compact native smooth scrolling component library for Vue 3 ⚡ No scrollbar reinventing using DOM elements, no weird logic, only native scr

ZEOKKU 11 Oct 1, 2022
Vue directive wrapper for smooth-scrollbar

smooth-vuebar Vue directive wrapper for smooth-scrollbar Demo You can refer to the wrapped library's demo. Why There are many other wrappers for this

Marco 'Gatto' Boffo 30 Sep 18, 2022
Smooth scrollbar for Vue.js projects

Vue Smooth Scrollbar Smooth Scrollbar for Vue.js projects. Based on @idiotwu's smooth-scrollbar. Usage 1. Install dependency npm install --save vue-sm

Magisters 34 Sep 18, 2022
📜 Vue.js + Stroll.js. Awesome CSS list scroll effects for Vue2.x.

vue-stroll Vue.js + Stroll.js. Awesome CSS list scroll effects for Vue2.x. See Demo Installation npm i vue-stroll -S CDN Use this URL for development

Yunwei Xiao 155 Jul 16, 2022
📜 Vue.js + Stroll.js. Awesome CSS list scroll effects for Vue2.x.

vue-stroll Vue.js + Stroll.js. Awesome CSS list scroll effects for Vue2.x. See Demo Installation npm i vue-stroll -S CDN Use this URL for development

Yunwei Xiao 155 Jul 16, 2022
A Vue.js directive for body scroll locking without breaking scrolling of a target element.

v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

Pete Hegman 182 Oct 1, 2022
Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

Mauricio Farias Dziedzinski 531 Sep 27, 2022
Lightweight package for highlighting menu items as you scroll the page, also scrolling to target section when item clicked. Use as a vue component/directive or in vanilla js.

navscroll-js Installation This package is available on npm. Using npm: npm install --save navscroll Using yarn: yarn add navscroll Directly include it

Honoré Nintunze 57 Mar 2, 2022