Help with scroll effect

[antoine.oriot]

Hi,
I’m coding a website for a client and he want to add some effect on one section of the website.
When the user scroll until this section, the section content centered in the page and then the next scrolls will updated the opacity of the elements without the section moving from the center of the window.
I don’t know if I’m clear but with the image it may be clearer :

User scroll untill section2.
Here there is 3 elements A, B & C with B & C with opacity 0.2.
Next users scroll should increase the opacity to 1 and the screen should remain on the section2.
Once the 3 elements have full opacity then next scroll will scroll to the next section.

I’m pretty sure I have already see something like this on other websites or similar like element appear on mousewheel and the scroll not moving but I can’t find a nice way to do it.

Thanks for the help.

[antoine.oriot]

Finally someone told me to use GSAP and its help me solved it.
I use ScrollTrigger from GSAP => https://greensock.com/docs/v3/Plugins/ScrollTrigger

With few lines of code I had my result :

  const tl = gsap.timeline();
  tl.from("#element", {opacity: 0.2});
  
  ScrollTrigger.create({
	animation: tl,
	trigger: ".sectionDeLelement",
	toggleActions: "restart none reverse none", // redémarre qd on arrive sur la section, revient en arriere au scroll back 
	start: "top top",	// début quand le haut de la section touche le haut de l'écran
	end: "bottom",  // fin lorsque bas section touche haut de l'écran
	pin: true,		// permet de rester fixé sur la section "sectionDeLelement"
	scrub: true		// l'effet se fait au scroll de la souris
  });