Observer is affecting my descendent elements

[jonnykashhh]

I am currently working on a project using nextJS / tailwind and have setup gsap for the animation. 

I have set up the reference points of my Dom elements:

 

 const pink = useRef();

  const blue = useRef();

  const green = useRef();

  const firstPage = useRef();

 

then i am registering the plugins 

 

 gsap.registerPlugin(ScrollTrigger, Observer);

 

i then created the state of the firstPage element 

 

  const [firstPageOn, setFirstPageOn] = useState(true);

 

I am applying the gsap Observer object in the useEffect hook like this : 

 

 

useEffect(() => {

    const observer = Observer.create({

      target: firstPage.current,

      type: "wheel, touch, scroll, pointer",

      onUp: () => {

        gsap.to(firstPage.current, {

          duration: 2,

          opacity: 0,

          onComplete: () => {

            setFirstPageOn(false);

          },

        });

      },

      onDown: () => {

        setFirstPageOn(false);

      },

    });

    return () => {

      observer.kill();

    };

  }, []);

and it behaves as expected and the firstPage element is fading out correctly, however the same animation is also being applied to all of the descendent elements (blue, pink, green ) and they are also fading to an opacity of 0

 

i have also setup gsap animation for the descendent elements in this useEffect hook : 

 

 useEffect(() => {

    let ctx = gsap.context(() => {

      gsap.to(blue.current, {

        scrollTrigger: {

          trigger: pink.current,

          scrub: 1,

          pin: pink.current,

          start: "top 40%",

          end: "bottom 10%",

          markers: true,

        },

      });

      gsap.to(green.current, {

        scrollTrigger: {

          trigger: pink.current,

          scrub: 1,

          pin: pink.current,

          start: "top 60%",

          end: "bottom 10%",

        },

      });

      return () => ctx.revert();

    });

  }, []);

here are the return jsx elements: 

 

 return (

    <div>

      {firstPageOn ? (

        <div

          ref={firstPage}

          className="fixed inset-0 flex items-center justify-center w-screen h-screen bg-black"

        >

          <h1 className="text-white">Loading...</h1>

        </div>

      ) : (

        <div>

<div

            className="bg-blue-700 h-screen w-screen flex justify-center items-center"

            ref={blue}

          >

 <div className="absolute bg-pink-500 w-32 h-32" ref={pink}>

 </div>

          </div>

          <div className="h-screen w-screen bg-green-200" ref={green}></div>

 </div>

      )}

    </div>

  );

};

 

export default Backdrop;

 

Thank you for any assistance that can be offered, 

 

 

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[GreenSock]

Welcome to the forums, @jonnykashhh

 

I'm a bit confused by your question - if you fade out a parent, obviously all of its descendants would also fade with it. Am I missing something? Maybe once you provide a minimal demo, the problem will become more clear. 

[jonnykashhh]

Thanks guys for your prompt response, i have an example for review here in CodeSandBox (branch is wispy-forest)

so i have set up the gsap Observer which behaves as expected when targeting the frontPage element, on initial mount I have setup a loading page and onup the fading to opacity 0 is triggered, onDown, the rest ofthe project is mounted, my question and confusion is why is it also targeting the descendent elements when i have a seperate useEffect and gsap animation(scrollTrigger) for these descendent elements. Thanks 

Edited July 3, 2023 by jonnykashhh
more clarity to my question

[Cassie]

Hi there!
 

I can't see the link I'm afraid - but just echoing what Jack's said

If you fade out a parent, all of its descendants would also fade with it.

[jonnykashhh]

Hey, i am attaching it as hyperlink: (thisIsTheLink)

 

I understand what jack is saying and agree but I am running a ternary condition to display the children if the condition being the gsap animation is met. The element (div) it self is not a parent element it is a decedent intelf and is causing the same effect it's sibling element. My bad I actually worded the question wrong

 

 

 

 

[mvaneijgen]

Hi @jonnykashhh when opening any link you've posted we get 

 

Quote

Project not found

It's likely that the project you're trying to access doesn't exist or you don't have the required permissions to access it.

 

We also stopped using Codesandbox for our demos and use  StackBlitz. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

[jonnykashhh]

Well noted and apologies for the errors, this is the link to StackBlitz: https://stackblitz.com/edit/stackblitz-starters-j1aet4?file=src%2Fcomponents%2Fbackdrop%2Fbackdrop.jsx

 

Many thanks

 

[Rodrigo]

Hi,

 

I checked your example and I'm not 100% sure I follow exactly what you're trying to do. Right now all your markers are in odd positions and pass the start and end points in the viewport because they're being conditionally rendered here:

{firstPageOn ? (
  <div
    ref={firstPage}
    className="fixed inset-0 flex items-center justify-center w-screen h-screen bg-black"
  >
    <h1 className="text-white">Loading...</h1>
  </div>
) : (
  <div>
    <div
      className="bg-blue-700 h-screen w-screen flex justify-center items-center"
      ref={blue}
    >
      <div className="absolute bg-pink-500 w-32 h-32" ref={pink}></div>
    </div>
    <div className="h-screen w-screen bg-green-200" ref={green}></div>
  </div>
)}

So those elements are not in the DOM when the page first renders. You have to pass the firstPage state property as a dependency there:

useEffect(() => {
  if (firstPageOn) return;
  let ctx = gsap.context(() => {
    gsap.to(blue.current, {
      scrollTrigger: {
        trigger: pink.current,
        scrub: 1,
        pin: pink.current,
        start: 'top 40%',
        end: 'bottom 10%',
        markers: true,
      },
    });
    gsap.to(green.current, {
      scrollTrigger: {
        trigger: pink.current,
        scrub: 1,
        pin: pink.current,
        start: 'top 60%',
        end: 'bottom 10%',
        markers: { indent: 300 },
      },
    });
    return () => ctx.revert();
  });
}, [firstPageOn]);

Finally I don't see any opacity animation except for the one of the blue ref. If you want to keep the child elements of that particular one, then give each of those an opacity: 0

 

Hopefully this helps.

Happy Tweening!

[jonnykashhh]

Hi Rodrigo,

 

Yes the scroll start and scroll end are a little out of place, thanks for the help, yes that seems to be achieving the desired outcome with a few more tweaks I think I will get it to where I need it to be, thanks for your help it is highly appreciated and helped quite a lot actually.