Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
oligsap

Don't animate offscreen elements

Recommended Posts

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

Link to post
Share on other sites

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?

  • Like 1
Link to post
Share on other sites

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.

Link to post
Share on other sites
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.

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×