Jump to content
Search Community

ScrollTrigger: onUpdate callback and maximising performance

Théophile Avoyne test
Moderator Tag

Go to solution Solved by ZachSaucier,

Recommended Posts

Hi guys,

 

I just built this carousel using ScrollTrigger. Scrolling down the container does two things : (1) it translates the inner grid on the x-axis and (2) it changes the scale of the images based on their location (the closer to the left it is, the bigger it becomes—up to a certain point).

 

In order to get (2) working, I used an onUpdate callback. Every time the progress updates, the callback loops through the images array and determine each of their scaling value based on their index and the current progress value:

 

const step = 1 / (images.length - 1);

gsap.to('#grid', {
  ease: 'none',
  scrollTrigger: {
    end: () => `+=${-computeTransateX()}`,
    onUpdate: ({ progress }) => {
      images.forEach((image, index) => {
        const threshold = index / (images.length - 1);
        const factor = _.clamp(1 + ((threshold - progress) / step) * -0.3, scaleMin, scaleMax);
        image.style.transform = `scale(${factor})`;
      });
    },
    pin: true,
    scrub: true,
    snap: {
      duration: {min: 0.1, max: 0.3},
      snapTo: step,
    },
    trigger: container,
  },
  translateX: computeTransateX,
});

 

Everything works as expected. My question here is about efficiency. From what I understand, ScrollTrigger computes a great deal of stuff beforehand to maximise the performance. Wouldn't having such a loop inside an onUpdate callback go against this philosophy? If yes, what would you recommend me doing?

 

Thanks in advance 🙏

 

See the Pen wvzPKqm by theophileavoyne (@theophileavoyne) on CodePen

Link to comment
Share on other sites

  • Solution

Hey Théophile. 

 

On 12/26/2020 at 9:18 AM, Théophile Avoyne said:

ScrollTrigger computes a great deal of stuff beforehand to maximise the performance. Wouldn't having such a loop inside an onUpdate callback go against this philosophy?

The philosophy that you're talking about is a more general one than restricted to ScrollTrigger. It is: do as much relevant work as you can ahead of time, especially when someone is going to be waiting on you :) 

 

If I were tasked with creating this effect I'd create a timeline that animates all of the images as you need them to in terms of its position and scale. Then scrub that timeline using a ScrollTrigger. It's very similar to what you have now but would include the scale baked into the timeline animation.

 

I recently helped someone do pretty much the same thing here:

 

 

  • Like 4
Link to comment
Share on other sites

  • 2 months later...
8 minutes ago, Théophile Avoyne said:

Is this what you had in mind?

Yep! Small notes:

  • You can just use the x property instead of translateX if you want.
  • Instead of gsap.utils.toArray(document.getElementsByClassName('image')); you can just do gsap.utils.toArray('.image');
  • Like 2
Link to comment
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.
×
×
  • Create New...