Scrollmagic: Integration with Smooth Scrollbar

Created on 13 Feb 2017 · 4Comments · Source: janpaepke/ScrollMagic

Is it possible to listen to attach the scroll event to Smooth Scrollbar ?

I started using it everywhere abut I'm limited with scroll magic because of the normal scroll. With scroll magic and smooth scrollbar the whole experience for the user will be perfect (no more jumpy animations). For now I'm writing my own js code for triggering animations and progressing animations by scroll position etc. But it would be awesome to have the power of Scroll Magic with smooth scrolling

Thanks!

Source

cpouldev

👍1

Most helpful comment

I used smooth scrollbar with ScrollMagic by disabling the refreshInterval (better performance) and refresh the scene instance manually on every custom scroll event triggered by smooth scrollbar. In this way, the trigger element positions get updated smoothly.

// initialize controller
var controller = new ScrollMagic.Controller({
  refreshInterval: 0
})

// add a scene
var scene = new ScrollMagic.Scene(...)
    // ...
    .addTo(controller)

// intialize scrollbar
var scrollbar = SmoothScrollbar.init(document.querySelector('#main'))

// add listener to refresh the scene manually
scrollbar.addListener(() => {
  scene.refresh()
})

oncode on 16 Jun 2017

👍4 ❤1

All 4 comments

// initialize controller
var controller = new ScrollMagic.Controller({
  refreshInterval: 0
})

// add a scene
var scene = new ScrollMagic.Scene(...)
    // ...
    .addTo(controller)

// intialize scrollbar
var scrollbar = SmoothScrollbar.init(document.querySelector('#main'))

// add listener to refresh the scene manually
scrollbar.addListener(() => {
  scene.refresh()
})

oncode on 16 Jun 2017

👍4 ❤1

Is it possible to get scrollDirection with smooth scrollbar? I keep getting "PAUSED"?