[Minor errors in ScrollTrigger.normalizeScroll() documentation]

In the documentation this example is displayed:
 

ScrollTrigger.normalizeScroll({ 
  allowNestedScroll: true, 
  lockAxis: false, 
  momentum: self => Math.min(3, self.velocityY / 1000); // dynamically control the duration of the momentum when flick-scrolling 
  type: "touch,wheel,pointer", // now the page will be drag-scrollable on desktop because "pointer" is in the list 
});

There are 2 errors in the momentum line:
- the line should end with a "," not a ";"
- it should return 

Math.min(3, Math.abs(self.velocityY) / 1000)

as velocityY is negative when scrolling down and the momentum value is expected to be positive.

That's it, thanks!

 

[Conflict between 2 scroll triggered tweens]

Wow, it ended up being quite more complicated than what I anticipated!
Thank you so much for your answer and the time you spent making this solution, it will definitely be useful again in the future. ❤️

 

 

[Conflict between 2 scroll triggered tweens]

Hi, 

 

I'm facing a logic issue trying to animate 2 different things here: 

- A/ I'm animating the y position of each items based on the container scroll position. (Note that for this animation, I'm willingly animating the items, and not the container)

- B/ I also want to animate the opacity of each item based on their position in the viewport.

 

The problem is that since tween A moves the items, it messes with the scroll triggers of tween B.

If tween A was animating the 'x' position instead of 'y', there would be no problem.

 

How could I achieve such an animation (moving the items vertically while animating their opacity according on their position) ?

 

Thanks! 🙏

 

See the Pen gOeOeNg by Thibka (@Thibka) on CodePen

[Disable a tween and its scrollTrigger upon creation]

Thanks @PointC it does work!
And now I'm wondering how I didn't manage to get it working on my own! 🥲

 

@GreenSock In this case I need my target element to be hidden for a while. And since I'm using a gsap.from tween to go from hidden to visible, I need to declare the tween asap.
The alternative would be to manually hide the element first (using gsap.set, vanilla js, or css), and then use a gsap.to when I'm ready, but I find this 2-step approach less clear/elegant. 🙂

[Disable a tween and its scrollTrigger upon creation]

Hi, 

 

I'm trying to declare a simple tween with a scrollTrigger attached to it (like the one below for instance), but I want to control the moment this tween and its scrolltrigger are fired.

let tween = gsap.from('.text', {
    opacity: 0,
    duration: 2,
    scrollTrigger: {
        trigger: '.text',
    }
});

In other words, I just want to declare it, I don't want to play it right away!

Then, I want to be able to manually activate the scrollTrigger later on, and play the tween accordingly (if the element is in the viewport, the tween should play, else it should wait).

 

I've tried different combination of tween.scrollTrigger.disable(), tween.pause(), and also tried using the ScrollTrigger.create() approach but nothing seems to work!

 

Is that even possible? 🤔

 

Many thanks! 🙏

See the Pen gOvbBmL by Thibka (@Thibka) on CodePen