@superherocheesecake/scroll-triggers

ScrollTriggers

The ScrollTriggers API provides a way to observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

NPM installation

npm i --save @superherocheesecake/scroll-triggers

Require the module

import { scrollTriggers } from '@superherocheesecake/scroll-triggers');

ScrollTriggers Methods

enable()

scrollTriggers.enable();

disable()

scrollTriggers.disable();

enableRaf()

scrollTriggers.enableRaf();

disableRaf()

scrollTriggers.disableRaf();

update()

scrollTriggers.update();

tick()

Connect ScrollTriggers to the global RAF. Will fall back to an internal RAF if not set.

TweenMax.ticker.addEventListener('tick', scrollTriggers.tick);

createScope([scrollContainer, scrollElement])

Leave empty when you want to use the document viewport

var scope = scrollTriggers.createScope();

refresh()

Call refresh on resize

scrollTriggers.refresh();

killAll()

scrollTriggers.killAll();

setGlobalScrollTop()

// this is useful for when useing smoothscroll
scrollTriggers.setGlobalScrollTop(ScrollManager.getPosition());

ScrollTriggers Scope Methods

close()

scope.close();

enable()

scope.enable();

disable()

scope.disable();

registerElement(el, options)

Register an element to the scope. offsetTop and offsetBottom are required. offsetTop and offsetBottom are pixel values or you can add percentages (will use the height of the element, not the viewport).

var options = {
    offsetBottom: 100,
    offsetTop: 100,
    onBottomIn: function(e){
        // console.log('onBottomIn');
    },
    onBottomOut: function(e){
        // console.log('onBottomOut');
    },
    onTopIn: function(e){
        // console.log('onTopIn');
    },
    onTopOut: function(e){
        // console.log('onTopOut');
    },
    onUpdate: function(e){
        // console.log('onUpdate', e.state);
    }
};
scope.registerElement(el, options);

unregisterElement(el)

scope.unregisterElement(el);

updateElement(el, options)

var options = {
    offsetBottom: '100%',
    offsetTop: '100%',
    onBottomIn: function(e){
        // console.log('onBottomIn');
    },
    onBottomOut: function(e){
        // console.log('onBottomOut');
    },
    onTopIn: function(e){
        // console.log('onTopIn');
    },
    onTopOut: function(e){
        // console.log('onTopOut');
    },
    onUpdate: function(e){
        // console.log('onUpdate', e.state);
    }
};
scope.updateElement(el, options);

isEnabled()

scope.isEnabled();

getScrollElement()

scope.getScrollElement();

getScrollTop()

scope.getScrollTop();

getViewportHeight()

scope.getViewportHeight();

getTimeScale()

scope.getTimeScale();

getTimeScale()

scope.getTimeScale();