Get end pixel position of whole page (ScrollTrigger)

[tobiasger_ 0 Likes (Newbie)]

I'm applying a general ScrollTrigger instance over the whole page in order to use onUpdate more on a global level as well as snapping to points in the duration over the whole page.

 

The initialisation of the ScrollTrigger looks like this:
 

ScrollTrigger.create({
    start: 0,
    end: "max",
    snap: {
        snapTo: [
            0, 0.07549726145863361, 0.1510521764197175, 0.26145863361199195, 0.3137503603343903, 0.41222254251945806, 0.5044681464398962, 0.5967714038627847, 0.7813202652061113, 0.9474488325165754
        ],
        inertia: false,
        direction: false,
        ease: "power1.inOut",
        duration: {min: 0.2, max: 1},
        delay:0
    },
    onUpdate: self => console.log(self.progress)
});

I figured that it would be nice to create a function that returns the array in the snap.snapTo property. I imagine that I can pass an array containing arrays with the timeline for the label and then the label name. And the function would then iterate over all of these timeline/label pairs and push the duration value of each label into the array to be used in snap.snapTo.

 

So a kind of pseudo code example of the function creating a duration value of the label would look something like this:

function createDurationPointFromLabel (tl, label) {
    return tl.scrollTrigger.labelToScroll(label) / < Max value of ScrollTrigger here >
}

Can I get the max value in pixels somehow from the ScrollTrigger? I can use "max" in the end property, so I assume it would be possible.

[Carl 11,048 Likes (Superhero)]

if I understand correctly it sound like you just need the ScrollTtrigger's end value.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/end

 

In this simple example I'm using the start and end values to scroll through a scrolltrigger when you press the jump button

 

See the Pen jOagaPX?editors=0110 by snorkltv (@snorkltv) on CodePen