@teamthunderfoot/translate-on-scroll/src/TranslateOnScroll.js

Translate on scroll package

import gsap from "gsap"
import ScrollTrigger from "gsap/ScrollTrigger"
gsap.registerPlugin(ScrollTrigger)

class TranslateOnScroll {
    constructor(payload) {
        this.DOM = {
            element: payload.element, //this.DOM.element to translate
            pinnedContainer: payload.pinnedContainer ? payload.pinnedContainer : null,
        }
        this.defaultStart = payload.defaultStart ? payload.defaultStart : "80%" //default start if data-tos-start is not defined in html
        this.breakpoint = payload.breakpoint ? payload.breakpoint : 810 //modifier of translate distance due to breakpoint (0.4 = 40% of the distance)
        this.breakpointMod = payload.breakpointMod ? payload.breakpointMod : 0.4 //modifier of translate distance due to breakpoint (0.4 = 40% of the distance)
        this.markers = payload.markers ? payload.markers : false

        this.init()
    }
    init() {
        let displacementFactor = parseFloat(this.DOM.element.dataset.tos)

        //if the this.DOM.element is a background, the height of the this.DOM.element set to 100% + translate displacement
        if (this.DOM.element.dataset.tosBg) {
            this.DOM.element.style.height = `calc(100% + ${Math.abs(
                parseFloat(this.DOM.element.dataset.tos)
            )}px`
        }

        let scrollStart = this.DOM.element.dataset.tosStart
            ? this.DOM.element.dataset.tosStart
            : this.defaultStart
        let mm = gsap.matchMedia()
        mm.add(
            {
                isDesktop: `(min-width: ${this.breakpoint}px)`,
                isBreakpoint: `(max-width: ${this.breakpoint - 1}px)`,
            },
            (context) => {
                let { isDesktop } = context.conditions
                var mediaQuerydisplacementFactor = isDesktop ? 1 : this.breakpointMod

                // if the data-tos-movementent attribute of the this.DOM.element is = "from", the movement will be from displacement pixels, to its original position
                if (this.DOM.element.dataset.tosMovement == "from") {
                    this.tl = gsap.from(this.DOM.element, {
                        y: -displacementFactor * mediaQuerydisplacementFactor,

                        scrollTrigger: {
                            trigger: this.DOM.element,
                            start: `top ${scrollStart}`,
                            end: "center center", //when the data-tos-movement is "from", the this.DOM.element will take its orginal position when the user reachs the center of the screen
                            scrub: 1,
                            pinnedContainer: this.DOM.pinnedContainer,
                            markers: this.markers,
                        },
                    })
                } else {
                    this.tl = gsap.to(this.DOM.element, {
                        y: -displacementFactor * mediaQuerydisplacementFactor,

                        scrollTrigger: {
                            trigger: this.DOM.element,
                            start: `top ${scrollStart}`,
                            end: "bottom top",
                            scrub: 1,
                            pinnedContainer: this.DOM.pinnedContainer,
                            markers: this.markers,
                        },
                    })
                }
            }
        )
    }
    refresh() {
        this.tl.scrollTrigger.refresh()
    }
    destroy() {
        this.tl.scrollTrigger.kill()
    }
}
export default TranslateOnScroll