Start ScrollTrigger On Initial Scroll Regardless Of Element Position

[emilychews]

Hi,

 

Is it possible to start a scrollTrigger animation based on when the user first scrolls as opposed to it being in a particular position in relation to the window object? I guess in pseudo code it would be start: "+=1" so it triggers when the user has scrolled a least one pixel. It's for a project where certain elements are randomly generated and I would like them to parallax away when the user scrolls.
 

var box = document.querySelector(".box");

gsap.to(box, {
  y: -450,
  scrollTrigger: {
    trigger: box,
    start: "50% 50%",
    end: "100% 0",
    scrub: true
    // markers: true
  }
});

 

See the Pen bGeByNY by emilychews (@emilychews) on CodePen

[akapowl]

 

Hey @emilychews,

 

You could for example loop through all of your boxes, and for each box create a ScrollTrigger with start set to 

 

start: "top " + box.offsetTop,

 

and by the markers you see how they have their starts all set individually to how they are positioned on the page.

So if your start scrolling, the tweens should start too. I hope I understood you correct on that.

 

Just some notes on my example below:

I set the boxes to position fixed in this example, just to make them not also move the extra amount that you scroll, but only the amount that is declared in the tween. Also in my example I deactivated the scrub and use normal tweens being triggered. But you can easily comment the toggleActions out and put the scrub back in to see, how it works with scrub.

 

How exactly you tackle this, is of course up to you.

 

 

See the Pen 4775e6909cac82d34ab0eb0011362c6f by akapowl (@akapowl) on CodePen

 

 

Hope this helps.

Cheers, Paul

 

 

 

 

 

 

 

[mikel]

Hey @akapowl,

 

I like the concept idea.
After a while and trial & error ...

 

See the Pen WNxzPBa?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy weekend ...

Mikel