Skip to content

magr0s/vue-scrollmagic

Repository files navigation

Vue Scrollmagic Current version

Build Status Vue.js version Vue.js version License BuyMeACoffee

ScrollMagic plugin for Vue.js

Install

NPM

npm i vue-scrollmagic --save

Usage

mount with global

import VueScrollmagic from 'vue-scrollmagic'
Vue.use(VueScrollmagic)

mount with nuxt.js/ssr

// plugins/vue-scrollmagic.js
import VueScrollmagic from 'vue-scrollmagic'
Vue.use(VueScrollmagic)

// nuxt.config.js
{
  ...
  plugins: [{
    src: '~plugins/vue-scrollmagic.js',
    ssr: false
  }]
  ...
}

Once installed, the plugin add $scrollmagic to Vue.prototype and create global controller, to make him easily accessibles in every components.

Documentation

See ScrollMagic API and Example

Configure controller

Vue.use(VueScrollmagic, {
  vertical: true,
  globalSceneOptions: {},
  loglevel: 2,
  refreshInterval: 100
})

NOTE: Container is always a window.

Set custom scollTo handle

// src/main.js
...
this.$scrollmagic.handleScrollTo = function (target) {
  // some code
}
...

Set custom scrollTo handle with GSAP animation

import { TweenMax } from 'gsap'
import 'ScrollToPlugin'
...
this.$scrollmagic.handleScrollTo = function (target) {
  TweenMax.to(window, 1.5, {
    scrollTo: {
      y: target,
      autoKill: false
    }
  })
}
...

Methods

Name Description
attachTo Create scrollmagic controller to custom element. After creating the controller, you have access to your own Scrollmagic.Controller methods.
scene A Scene defines where the controller should react and how.
addScene Add one ore more scene(s) to the controller.
destroy Destroy the controller, all scenes and everything.
removeScene Remove one ore more scene(s) from the controller.
scrollTo Scroll to a numeric scroll offset, a DOM element, the start of a scene or provide an alternate method for
update Updates the controller params and calls updateScene on every scene, that is attached to the controller.
updateScene Update one ore more scene(s) according to the scroll position of the container.
enabled Get or Set the current enabled state of the controller.
loglevel Get or Set the current loglevel option value.
scrollPos Get the current scrollPosition or Set a new method to calculate it. When used as a setter this method prodes a
info Get all infos or one in particular

NOTE: In package adds plugins 'gsap.animation' and 'debug.addIndicators'

Example

mounted() {
  // Declare Scene
  const scene2 = this.$scrollmagic.scene({
    // ID of element where animation starts
    triggerElement: '#trigger2',

    // {0,0.5,1} - animations starts from {top,center,end} of window
    triggerHook: 0.5,

    // Duration of animation
    duration: 300
  })
    // Declaration of animation and attaching to element
    .setTween('#animate2', { 
      css: { 
        borderTop: '30px solid white', 
        backgroundColor: 'blue',
        scale: 0.7 // the tween durtion can be omitted and defaults to 1
      }
    })
    // Helpful tags for orientation on the screen
    .addIndicators({ name: '2 (duration: 300)' })

  // Add Scene to controller
  this.$scrollmagic.addScene(scene2)

  const scene3 = this.$scrollmagic.scene({
    triggerElement: '#box-inner', // set trigger on inner element
    triggerHook: 0,
    duration: '100%'
  })
    .setTween(
      // Declaration of animation and attaching to element
    )
    .addIndicators()

  // Attaching scrollmagic controller to element
  this.$scrollmagic.attachTo(this.$refs.scrollBox)

  // Add scene to element scrollmagic controller
  this.$refs.scrollBox.$scrollmagic.addScene(scene3)
}

Development

Compiles and hot-reloads

npm run serve

Compiles and minifies demo

npm run build:demo

Compiles and minifies library

npm run build:lib

Lints and fixes files

npm run lint

Author

magr0s

License

MIT

Releases

No releases published

Packages

No packages published