jonkwheeler / ScrollScene

ScrollScene is an extra layer on top of ScrollMagic as well as using IntersectionObserver to achieve similar effects.
https://scrollscene.jonkwheeler.now.sh/
MIT License
136 stars 9 forks source link

addIndicators not visible #27

Closed rupesx26 closed 4 years ago

rupesx26 commented 4 years ago

first of all this package is a lifesaver while using scrollmagic with react as scrollmagic required server site config.

but here I am trying to activate Indicators with scrollScene.Scene.addIndicators({ name: 'pin scene', colorEnd: '#ddd' }) but its not visible for same applied section note:- console-output = "export 'addIndicators' was not found in 'scrollscene' kindly guide or provide any code snippet for same

thanks

jonkwheeler commented 4 years ago

Can you provide more code than that in a codeblock?

I document it here: https://github.com/jonkwheeler/ScrollScene#add-indicators-using-the-addindicators-plugin-from-scrollmagic

rupesx26 commented 4 years ago

`const workScroll = new ScrollScene({ triggerElement: document.getElementById(item.route), triggerHook:1, duration: 600, offset: 500, reverse: false, scene : { reverse: false }, gsap: { timeline: animationType } })

        workScroll.Scene.addIndicators({ name: 'pin scene', colorEnd: '#00000' })`

But now the issue is in console 23:48:11:486 (ScrollMagic.Scene) -> ERROR calling addIndicators() due to missing Plugin 'debug.addIndicators'. Please make sure to include plugins/debug.addIndicators.js

jonkwheeler commented 4 years ago
import { ScrollScene, addIndicators } from 'scrollscene'

const workScroll = new ScrollScene({
  triggerElement: document.getElementById(item.route),
  triggerHook: 1,
  duration: 600,
  offset: 500,
  scene: {
    reverse: false,
  },
  gsap: {
    timeline: animationType,
  },
});

workScroll.Scene.addIndicators({ name: "pin scene", colorEnd: "#00000" });

Did you import it? The above should work ^^.

Btw, there is no reverse on the ScrollScene object. Only apply it to scene. You have it in 2 places.