Get translate3d values from ScrollTrigger

[Archetype]

Hi everyone,

 

I'm trying to get the value of the translate3d used on the element a ScrollTrigger is active on using the onUpdate method. I know you can get the scroll progress value but I don't know how to get the translate3d value.
 

ScrollTrigger.create({
  trigger: '.trigger',
  pin: true,
  start: 'center center',
  end: '+=300',
  onUpdate({ progress, scroll }) {
    console.log(progress);
    console.log(scroll());
    // How do you get the translate3d (x, y) values?
  }
});

 

[mikel]

Hey @Archetype,

 

Do you mean 'getBoundingClientRect'?

 

See the Pen vYWmWXr?editors=0010 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

[Archetype]

2 hours ago, mikel said:

Hey @Archetype,

 

Do you mean 'getBoundingClientRect'?

 

 

 

 

Happy tweening ...

Mikel

 

 

Hi Mikel. Thanks for this, this would work. I've noticed that the onUpdate doesn't continue firing while scrub is set to 1 and the animation is catching up, it stops firing as soon as you stop scrolling. Do you know how I could continue firing onUpdate while the animation is catching up with scrub?

[OSUblake]

You just need to use the animation's onUpdate instead of the trigger's onUpdate.

gsap.to(box, {
  onUpdate: () => { ... },
  scrollTrigger: { ...}
})

 

[OSUblake]

And if you're looking for the x, y, or any other value for that matter, you can use gsap.getProperty().