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

Toggle class, element : node not working #12

Closed alancoppin closed 4 years ago

alancoppin commented 4 years ago

Hi,

I just had an issue with the toggle class option, in the element when passing a normal DOM (for example : '.header') it's not working and checking into the code ScrollScene.js line 82, toggle.element.classList = undefined. as toggle.element is just a string not a DOM node.

I had to change to : toggle: { element: document.querySelector('.header'), className: 'turn-black',reverse: true, }

It's working fine with that.

I don't know if I did something wrong or maybe a bug... Just to let you know.

jonkwheeler commented 4 years ago

That's correct. You cannot do '.header'. You should use a dom selector. '.header' is just a string.

const $element = document.querySelector('.header')

... toggle: { element: $element, className: 'turn-black',reverse: true, }

See under key notes about this: https://github.com/jonkwheeler/ScrollScene#key-notes

I could add this feature but I really don't want to as it's bad javascript. You should cache your selectors instead, as shown in the example above.

Edit: Gonna add better examples to the README. Thanks!