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

Translate on scroll package

import TranslateOnScroll from "./TranslateOnScroll"

class Page {
    constructor() {
        this.init()
    }
    init() {
        document.querySelectorAll("#example-1 .js--tos").forEach((element) => {
            new TranslateOnScroll({
                element: element,
            })
        })
        document.querySelectorAll("#example-2 .js--tos").forEach((element) => {
            new TranslateOnScroll({
                element: element,
                defaultStart: "70%",
                breakpoint: 1024,
                breakpointMod: 0.1, //if data-tos=400 -> from 1024px of window.width, the distance of displacement will be 40px (400 * 0.1)
            })
        })
        document.querySelectorAll("#example-3 .js--tos").forEach((element) => {
            new TranslateOnScroll({
                element: element,
            })
        })
        document.querySelectorAll("#example-4 .js--tos").forEach((element) => {
            new TranslateOnScroll({
                element: element,
                breakpoint: 680,
                breakpointMod: 0.5,
                // pinnedContainer: null,
                // markers: true,
            })
        })
        document.querySelectorAll("#example-5 .js--tos").forEach((element) => {
            new TranslateOnScroll({
                element: element,
                breakpoint: 680,
                breakpointMod: 0.5,
            })
        })
    }
}
export default Page
new Page()