scrolltrigger Don't animate offscreen elements

[oligsap]

Hi there !

 

I have a horizontal scroll in place with Scrolltrigger. I was wondering if it was possible to disable animating elements when they're out of the viewport for performance matter ? Juste like Locomotive scroll : https://locomotivemtl.github.io/locomotive-scroll/

 

Thanks for your feedback

 

 

See the Pen GRZORvX by olig (@olig) on CodePen

[ZachSaucier]

I'm a bit confused because ScrollTrigger does this by default for all ScrollTrigger animations whereas that's not the case with Locomotive Scroll.

 

The issue with your demo is that your values start and end values are telling the animations to continue for the entire duration of the container's width no matter where they are in the container. If you want to avoid that then you'll have to change your logic a bit: 

1. Record the initial offset of each element.
2. Reposition the element until it's just off screen (if not on screen already).
3. Create an animation that animates the child element to the left 100vw + the width of the child element with linear ease (except the last one(s) so you don't have blank space at the end, you animate them less).
4. Create a ScrollTrigger for each child element which starts at the offset recorded in 1 and goes for 100vw + the width of the child element (except the last one(s) so you don't have blank space at the end, their end should be shorter).

Does that make sense?

[oligsap]

Makes perfect sense.

 

I just forked the Horizontal snapping demo that has the same logic : 

See the Pen YzygYvM by GreenSock (@GreenSock) on CodePen

 

In the demo, elements offscreen are still animated.

[ZachSaucier]

4 minutes ago, oligsap said:

In the demo, elements offscreen are still animated.

Yep, it's just a proof of concept/getting started demo  If the content isn't heavy you don't have anything to worry about using that simple approach.