This paper mainly introduces the implementation of complex page scrolling interaction using GSAP and VUE-ScrollMagic plug-in in Nuxt.

Front row tips:

  • Operating system: Windows 10
  • Editor: VS Code & HBuilder X
  • Version used:GSAP: 3.6.0.Vue - scrollmagic: 1.2.0

Related recommendations:

  • Nuxt Development Notes – 1 Quick Start
  • Nuxt Development Notes – 2 Video and graphic hybrid rotation banner

preview

CodeSandbox: Nuxt Development Notes – 3 Scrolling interactive effects

Due to the GSAP version, the project cannot be previewed directly in the CodeSandbox imported. You need to open it, create a Thermal on the console in the lower right corner, and enter the yarn dev command. Finally, refresh the preview page in the upper right corner.

The document

GSAP official website, VUE-ScrollMagic, scrollMagic official website

The installation

vue-scrollmagic

For detailed installation steps, see vuE-ScrollMagic,

The following is only the author’s way of use, only for reference.

# When installing vue-ScrollMagic, scrollMagic is automatically installed
$ yarn add vue-scrollmagic
Copy the code

GSAP

For details, see GSAP

Special tip: Install directly with YARN Add GSAP and you will get the gasP version without Bonus plugins. To use GASp with VUE – ScrollMagic in Nuxt, you must install the version of GasP that includes Bonus Plugins, which requires registration and login to install.

The following is only the author’s way of use, only for reference.

  1. After login, the Dashboard page is displayed. The GSAP compressed package and Token are available

  2. Install via.npMRc file (personal recommendation)

    Create a.npmrc file in the root directory of the project (the author provides a.npmrc file on GitHub for personal use only, do not use it)

    //npm.greensock.com/:_authToken=<token>
@gsap:registry=https://npm.greensock.com
Copy the code

    Open a terminal

     # 
        
          has the following options: Business, shockingly, simply, or member
        
 # Is indicated in the right bar of the official website Dashboard page (above). Generally, the default is member.

 $ yarn add gsap@npm:@gsap/<package>
Copy the code

  3. Install from the gSAP-bonus. TGZ file

    Locate the file in the downloaded zip package and place it in the project root directory

    Open a terminal

    $ yarn add ./gsap-bonus.tgz
Copy the code

  4. “Gsap “:” NPM :@gsap/member”/”gsap”: “file:gsap-bonus. TGZ”

configuration

For details, see vue-ScrollMagic

The following is only the author’s way of use, only for reference.

  1. Create a new vuE-scrollMagic.js file in the plugins folder

    import Vue from "vue";
import VueScrollmagic from "vue-scrollmagic";

Vue.use(VueScrollmagic);
Copy the code

  2. Modify the nuxt.config.js file in the root directory

    plugins: [
  {
    src: "@/plugins/vue-scrollmagic.js",
    ssr: false}].Copy the code

use

By default, you already know how to use ScrollMagic. Otherwise, please visit the official website of ScrollMagic for a quick start.

  1. Create the ScrollMagicBasic.vue component in the Components folder

    <template> <div> <div :class="`scroll-scene item-${scene.id}`" v-for="scene in sceneData" :key="scene.id"> <h1>{{ scene.title }}</h1> </div> </div> </template> <script> export default { name: "ScrollMagicBasic", props: { sceneData: { type: Array, default: () => { return []; } } }, mounted() { const that = this; that.scrollGsap(); }, methods: { scrollGsap() { const that = this; const slides = document.querySelectorAll(".scroll-scene"); for (let i = 0; i < slides.length; i++) { that.$scrollmagic.addScene( that.$scrollmagic .scene({ triggerElement: slides[i], triggerHook: "OnLeave ", duration: "100%"}).setpin (slides[I], {pushFollowers: false}) //.addindicators () // debug); }}}}; </script> <style> .scroll-scene { height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; } </style>Copy the code

  2. Use this component in the index.vue file in the Pages folder

    <template>
  <div>
    <div class="demo">
      <ScrollMagicBasic :sceneData="basicSceneData" />
    </div>
  </div>
</template>

<script>
  import ScrollMagicBasic from "@/components/ScrollMagicBasic";

  export default {
    data() {
      return {
        basicSceneData: [
          {
            id: 0,
            title: "scene item-0",
          },
          {
            id: 1,
            title: "scene item-1",
          },
          {
            id: 2,
            title: "scene item-2",
          },
          {
            id: 3,
            title: "scene item-3",
          }
        ]
      }
    },
    components: {
      ScrollMagicBasic
    }
  }
</script>

<style>
  .demo {
    position: relative;
    overflow: hidden;
    background-color: white;
  }

  .item-0 {
    background-color: teal;
  }

  .item-1 {
    background-color: thistle;
  }

  .item-2 {
    background-color: tomato;
  }

  .item-3 {
    background-color: turquoise;
  }
</style>
Copy the code

  3. Effect preview (simple scrolling effect with vue-ScrollMagic only)

  4. Create the ScrollMagicAdvanced.vue component in the Components folder

    <template> <div> <div class="pin-wrap"> <div class="scroll-wrap"> <div :class="`scroll-part item-${scene.id}`" v-for="scene in sceneData" :key="scene.id"> <h1>{{ scene.title }}</h1> </div> </div> </div> </div> </template> <script> export default { name: "ScrollMagicAdvanced", props: { sceneData: { type: Array, default: () => { return []; } } }, mounted() { const that = this; that.scrollGsap(); }, methods: { scrollGsap() { const that = this; var tl = new TimelineMax({ onUpdate: updatePercentage }); Tl. To (". Scroll - wrap ", 1, {x: "12.5%"}); tl.to(".scroll-wrap", 1, {x: "-25%"}); Tl. To (". Scroll - wrap ", 1, {x: "37.5%"}); tl.to(".scroll-wrap", 1, {x: "-50%"}); const scene = that.$scrollmagic .scene({ triggerElement: ".pin-wrap", triggerHook: "onLeave", duration: "400%" }) .setPin(".pin-wrap") .setTween(tl); // .addIndicators(); That / / debugging. $scrollmagic. AddScene (scene); function updatePercentage() { tl.progress(); }}}}; </script> <style> .pin-wrap { width: 100%; height: 100vh; overflow: hidden; -webkit-perspective: 1000; perspective: 1000; } .scroll-wrap { width: 200%; height: 100vh; }.scroll-part {width: 12.5%; height: 100vh; float: left; display: flex; flex-direction: column; align-items: center; justify-content: center; } </style>Copy the code

  5. Use this component in the index.vue file in the Pages folder

    <template>
  <div>
    <div class="demo">
      <ScrollMagicAdvanced :sceneData="advancedSceneData">
      </ScrollMagicAdvanced>
    </div>
  </div>
</template>

<script>
  import ScrollMagicAdvanced from "@/components/ScrollMagicAdvanced";

  export default {
    data() {
      return {
        advancedSceneData: [{
            id: 0,
            title: "part item-0",
          },
          {
            id: 1,
            title: "part item-1",
          },
          {
            id: 2,
            title: "part item-2",
          },
          {
            id: 3,
            title: "part item-3",
          },
          {
            id: 4,
            title: "part item-4",
          },
          {
            id: 5,
            title: "part item-5",
          },
          {
            id: 6,
            title: "part item-6",
          },
          {
            id: 7,
            title: "part item-7",
          }
        ]
      }
    },
    components: {
      ScrollMagicBasic,
      ScrollMagicAdvanced
    }
  }
</script>

<style>
  .demo {
    position: relative;
    overflow: hidden;
    background-color: white;
  }

  .item-0 {
    background-color: teal;
  }

  .item-1 {
    background-color: thistle;
  }

  .item-2 {
    background-color: tomato;
  }

  .item-3 {
    background-color: turquoise;
  }

  .item-4 {
    background-color: violet;
  }

  .item-5 {
    background-color: wheat;
  }

  .item-6 {
    background-color: yellow;
  }

  .item-7 {
    background-color: yellowgreen;
  }
</style>
Copy the code

  6. Effect Preview (VuE-ScrollMagic with gSAP implementation of complex scrolling effects)

  7. For more effects, please refer to the official case provided by ScrollMagic’s official website

The source code

GitHub: Nuxt Development Notes – 3 scrolling interactive effects