Conflict problem in fade in and fade out on scrolling

[OrganicBlue]

Hello everybody.

I am trying to make a fade in and out on scroll animation on two elements in a row, but it has an error.
If I do it on just one element, it works fine, but when I do it on the second one, something breaks.
I appreciate if you can guide me in the solution.

See the Pen YzJGJWv by Satelier-Diego (@Satelier-Diego) on CodePen

[Rodrigo]

Hi,

 

The issue is when you create the Timeline instance for each section. Basically when you animate something using a collection or array is ok but when it comes to ScrollTrigger's trigger element you can't use that and is quite obvious: Which one actually controls the animation? What happens if for some reason they overlap? See the problem?

 

In this case is better to loop through all the sections, create a single timeline for each and then add the animations of each section's children to the timeline:

const sections = gsap.utils.toArray(".section-scroll-fade");

sections.forEach((section) => {
  let scrollFadeElements = section.querySelectorAll(
    ".scroll-fade__group"
  );
  let scrollFadeLength = scrollFadeElements.length * 1000;
  let scrollFadeTL = gsap.timeline({
    scrollTrigger: {
      trigger: section,
      start: "top top",
      end: "+=" + scrollFadeLength,
      scrub: true,
      pin: true,
      id: "asd",
      markers: {
        indent: 150
      }
    }
  });
  scrollFadeElements.forEach((e) => {
    scrollFadeTL
      .from(e, scrollFadeTweenOptionsIn)
      .to(e, scrollFadeTweenOptionsOut, "=+4");
  });
});

Here is a fork of your codepen example:

See the Pen GRYjzbK by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[OrganicBlue]

I understand what you are saying. Thank you!

 

BTW, why you useconst sections = gsap.utils.toArray(".section-scroll-fade");when already have let scrollFade = document.querySelectorAll(".section-scroll-fade");?

[Rodrigo]

16 minutes ago, OrganicBlue said:

 

BTW, why you useconst sections = gsap.utils.toArray(".section-scroll-fade");when already have let scrollFade = document.querySelectorAll(".section-scroll-fade");?

Mhhh.... I just forgot to remove the scrollFade variable definition, just that

 

Happy Tweening!

[GreenSock]

Just for the record, gsap.utils.toArray() is often better than document.querySelectorAll() because it returns a genuine Array that has all the methods like push(), splice(), pop(), etc. 

[OrganicBlue]

Thank you both!